/* ================================================================
   ChessMaster — 9 Full UI Themes
   Each theme overrides body background, ALL cards, board, modals,
   buttons, text, and effects globally.
   ================================================================ */

/* === Helper: All main surfaces === */
.t-surface {
    /* marker class, nothing here */
}

/* ============================================================
   THEME 1: WATER (Default)
   ============================================================ */
body.ui-water {
    background: linear-gradient(135deg, #03045e 0%, #0a0e1a 40%, #023e8a 100%) !important;
}
body.ui-water::before {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0,180,216,0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(3,4,94,0.2) 0%, transparent 50%) !important;
}
body.ui-water::after {
    content: '';
    position: fixed;
    bottom: 0; left: 0;
    width: 200%; height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,60 C150,90 350,0 600,60 C850,120 1050,30 1200,60 L1200,120 L0,120 Z' fill='rgba(0,119,182,0.08)'/%3E%3C/svg%3E") repeat-x;
    animation: bodyWave 8s linear infinite;
    pointer-events: none; z-index: 0;
}
@keyframes bodyWave { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   THEME 2: GLASSMORPHISM
   ============================================================ */
body.ui-glassmorphism {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
}
body.ui-glassmorphism::before {
    background:
        radial-gradient(circle at 30% 20%, rgba(99,102,241,0.25) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(236,72,153,0.2) 0%, transparent 40%) !important;
}
body.ui-glassmorphism .mode-card,
body.ui-glassmorphism .learn-card,
body.ui-glassmorphism .setting-group,
body.ui-glassmorphism .player-info,
body.ui-glassmorphism .move-history-panel,
body.ui-glassmorphism .stats-bar,
body.ui-glassmorphism .modal-content,
body.ui-glassmorphism .game-menu,
body.ui-glassmorphism .game-status,
body.ui-glassmorphism .board-wrapper {
    background: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}
body.ui-glassmorphism .mode-card:hover,
body.ui-glassmorphism .learn-card:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.25) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
body.ui-glassmorphism .water-btn {
    background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(168,85,247,0.5), rgba(236,72,153,0.4)) !important;
    box-shadow: 0 4px 15px rgba(99,102,241,0.3) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
body.ui-glassmorphism .water-btn:hover {
    box-shadow: 0 8px 30px rgba(99,102,241,0.4), 0 0 20px rgba(168,85,247,0.2) !important;
}
body.ui-glassmorphism .stat-value,
body.ui-glassmorphism .stat-number,
body.ui-glassmorphism .go-stat-value,
body.ui-glassmorphism .player-timer,
body.ui-glassmorphism .logo-text h1 span {
    background: linear-gradient(135deg, #818cf8, #e879f9) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.ui-glassmorphism .icon-btn {
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
body.ui-glassmorphism .status-indicator { background: #818cf8 !important; }
body.ui-glassmorphism .game-badge { background: rgba(129,140,248,0.2) !important; color: #818cf8 !important; }
body.ui-glassmorphism .chess-board {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.1) !important;
}

/* ============================================================
   THEME 3: CRYSTAL
   ============================================================ */
body.ui-crystal {
    background: linear-gradient(135deg, #0c0c1d 0%, #1a1a3e 50%, #0d0d2b 100%) !important;
}
body.ui-crystal::before {
    background:
        radial-gradient(circle at 25% 25%, rgba(255,100,150,0.12) 0%, transparent 40%),
        radial-gradient(circle at 75% 75%, rgba(100,200,255,0.12) 0%, transparent 40%) !important;
}
body.ui-crystal .mode-card,
body.ui-crystal .learn-card,
body.ui-crystal .setting-group,
body.ui-crystal .player-info,
body.ui-crystal .move-history-panel,
body.ui-crystal .stats-bar,
body.ui-crystal .modal-content,
body.ui-crystal .game-status,
body.ui-crystal .board-wrapper {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.3) !important;
}
body.ui-crystal .mode-card,
body.ui-crystal .setting-group,
body.ui-crystal .stats-bar {
    position: relative; overflow: hidden;
}
body.ui-crystal .mode-card::after,
body.ui-crystal .setting-group::after,
body.ui-crystal .stats-bar::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from 0deg, rgba(255,0,100,0.3), rgba(255,165,0,0.3), rgba(255,255,0,0.3), rgba(0,255,100,0.3), rgba(0,100,255,0.3), rgba(150,0,255,0.3), rgba(255,0,100,0.3));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude; -webkit-mask-composite: xor;
    padding: 1px; animation: crystalHue 6s linear infinite; opacity: 0.4;
}
@keyframes crystalHue { to { filter: hue-rotate(360deg); } }
body.ui-crystal .mode-card:hover::after { opacity: 1; }
body.ui-crystal .water-btn {
    background: linear-gradient(135deg, rgba(200,100,255,0.5), rgba(100,200,255,0.4), rgba(200,255,100,0.3)) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 0 4px 20px rgba(200,100,255,0.3) !important;
}
body.ui-crystal .stat-value, body.ui-crystal .stat-number, body.ui-crystal .go-stat-value, body.ui-crystal .player-timer, body.ui-crystal .logo-text h1 span {
    background: linear-gradient(90deg, #ff6b9d, #c084fc, #60a5fa, #34d399) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
    background-size: 200% 100%; animation: crystalText 4s ease-in-out infinite;
}
@keyframes crystalText { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body.ui-crystal .status-indicator { background: linear-gradient(135deg, #ff6b9d, #c084fc) !important; }
body.ui-crystal .chess-board { box-shadow: 0 4px 30px rgba(200,100,255,0.2), 0 0 0 1px rgba(255,255,255,0.1) !important; }

/* ============================================================
   THEME 4: LIQUID
   ============================================================ */
body.ui-liquid {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
}
body.ui-liquid::before {
    background:
        radial-gradient(ellipse at 30% 30%, rgba(147,51,234,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 70%, rgba(59,130,246,0.15) 0%, transparent 50%) !important;
}
body.ui-liquid .mode-card,
body.ui-liquid .learn-card,
body.ui-liquid .setting-group,
body.ui-liquid .player-info,
body.ui-liquid .move-history-panel,
body.ui-liquid .stats-bar,
body.ui-liquid .modal-content,
body.ui-liquid .game-status,
body.ui-liquid .board-wrapper {
    background: rgba(147,51,234,0.08) !important;
    border: 1px solid rgba(147,51,234,0.2) !important;
    border-radius: 28px !important;
    box-shadow: 0 8px 32px rgba(147,51,234,0.15) !important;
}
body.ui-liquid .mode-card:hover, body.ui-liquid .learn-card:hover {
    border-radius: 20px 36px 20px 36px !important;
    background: rgba(147,51,234,0.14) !important;
}
body.ui-liquid .water-btn {
    background: linear-gradient(135deg, #9333ea, #7c3aed, #6366f1) !important;
    box-shadow: 0 4px 20px rgba(147,51,234,0.4) !important;
}
body.ui-liquid .water-btn:hover { border-radius: 20px 40px 20px 40px !important; }
body.ui-liquid .stat-value, body.ui-liquid .stat-number, body.ui-liquid .go-stat-value, body.ui-liquid .player-timer, body.ui-liquid .logo-text h1 span {
    background: linear-gradient(135deg, #c084fc, #818cf8) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body.ui-liquid .status-indicator { background: #a78bfa !important; }
body.ui-liquid .chess-board { box-shadow: 0 4px 30px rgba(147,51,234,0.25) !important; border-radius: 12px !important; }

/* ============================================================
   THEME 5: CLAYMORPHISM
   ============================================================ */
body.ui-claymorphism {
    background: linear-gradient(135deg, #f0e6ff 0%, #e8f4f8 50%, #fce7f3 100%) !important;
}
body.ui-claymorphism::before {
    background: radial-gradient(circle at 30% 30%, rgba(196,181,253,0.3) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(252,231,243,0.3) 0%, transparent 50%) !important;
}
body.ui-claymorphism .mode-card,
body.ui-claymorphism .learn-card,
body.ui-claymorphism .setting-group,
body.ui-claymorphism .player-info,
body.ui-claymorphism .move-history-panel,
body.ui-claymorphism .stats-bar,
body.ui-claymorphism .modal-content,
body.ui-claymorphism .game-status,
body.ui-claymorphism .board-wrapper {
    background: rgba(255,255,255,0.6) !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow: 8px 8px 16px rgba(166,140,200,0.2), -4px -4px 12px rgba(255,255,255,0.8), inset 2px 2px 4px rgba(255,255,255,0.6), inset -1px -1px 3px rgba(166,140,200,0.1) !important;
}
body.ui-claymorphism .mode-card:hover, body.ui-claymorphism .learn-card:hover {
    transform: translateY(-4px);
    box-shadow: 12px 12px 24px rgba(166,140,200,0.25), -6px -6px 16px rgba(255,255,255,0.9), inset 2px 2px 4px rgba(255,255,255,0.7) !important;
}
body.ui-claymorphism .water-btn {
    background: linear-gradient(135deg, #c084fc, #a78bfa, #818cf8) !important;
    box-shadow: 4px 4px 10px rgba(147,51,234,0.3), -2px -2px 8px rgba(255,255,255,0.5), inset 1px 1px 2px rgba(255,255,255,0.3) !important;
    border: none !important;
}
/* All text overrides for light background */
body.ui-claymorphism, body.ui-claymorphism h1, body.ui-claymorphism h2, body.ui-claymorphism h3, body.ui-claymorphism h4,
body.ui-claymorphism .mode-card h3, body.ui-claymorphism .section-title, body.ui-claymorphism .setting-group h3,
body.ui-claymorphism .player-name, body.ui-claymorphism .game-title, body.ui-claymorphism .learn-header h2,
body.ui-claymorphism .settings-header h2, body.ui-claymorphism .move-history-panel h4, body.ui-claymorphism #status-text {
    color: #2d1b4e !important;
}
body.ui-claymorphism .mode-card p, body.ui-claymorphism .tagline, body.ui-claymorphism .stat-label,
body.ui-claymorphism .player-rating, body.ui-claymorphism .learn-card p, body.ui-claymorphism .setting-row,
body.ui-claymorphism .about-text, body.ui-claymorphism .modal-subtitle, body.ui-claymorphism .text-btn,
body.ui-claymorphism .move-entry .move-number {
    color: #6b5b8a !important;
}
body.ui-claymorphism .stat-value, body.ui-claymorphism .stat-number, body.ui-claymorphism .go-stat-value, body.ui-claymorphism .player-timer, body.ui-claymorphism .logo-text h1 span {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body.ui-claymorphism .icon-btn { background: rgba(255,255,255,0.5) !important; border: none !important; box-shadow: 3px 3px 8px rgba(166,140,200,0.15), -2px -2px 6px rgba(255,255,255,0.7) !important; color: #2d1b4e !important; }
body.ui-claymorphism .game-menu { background: rgba(255,255,255,0.9) !important; border: none !important; box-shadow: 8px 8px 20px rgba(166,140,200,0.2) !important; }
body.ui-claymorphism .game-menu button { color: #2d1b4e !important; }
body.ui-claymorphism .status-indicator { background: #a78bfa !important; }
body.ui-claymorphism .toggle-slider { background: rgba(166,140,200,0.25) !important; }
body.ui-claymorphism input:checked + .toggle-slider { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; }
body.ui-claymorphism .move-entry { background: rgba(167,139,250,0.1) !important; }
body.ui-claymorphism .move-entry .white-move { color: #2d1b4e !important; }
body.ui-claymorphism .move-entry .black-move { color: #7c3aed !important; }
body.ui-claymorphism .game-badge { background: rgba(167,139,250,0.2) !important; color: #7c3aed !important; }
body.ui-claymorphism .chess-board { box-shadow: 8px 8px 20px rgba(166,140,200,0.2), -4px -4px 12px rgba(255,255,255,0.8) !important; }
body.ui-claymorphism .logo-icon, body.ui-claymorphism .chess-icon-animated { filter: none !important; }
body.ui-claymorphism .ui-theme-btn { color: #6b5b8a !important; background: rgba(255,255,255,0.4) !important; }
body.ui-claymorphism .ui-theme-btn.active { border-color: #a855f7 !important; color: #2d1b4e !important; }
body.ui-claymorphism .theme-btn, body.ui-claymorphism .piece-style-btn { color: #6b5b8a !important; background: rgba(255,255,255,0.3) !important; }
body.ui-claymorphism .theme-btn.active, body.ui-claymorphism .piece-style-btn.active { border-color: #a855f7 !important; color: #2d1b4e !important; }

/* ============================================================
   THEME 6: FROSTED ACRYLIC
   ============================================================ */
body.ui-frosted {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%) !important;
}
body.ui-frosted::before {
    background:
        radial-gradient(circle at 20% 50%, rgba(56,189,248,0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(167,139,250,0.1) 0%, transparent 40%) !important;
}
body.ui-frosted .mode-card,
body.ui-frosted .learn-card,
body.ui-frosted .setting-group,
body.ui-frosted .player-info,
body.ui-frosted .move-history-panel,
body.ui-frosted .stats-bar,
body.ui-frosted .modal-content,
body.ui-frosted .game-menu,
body.ui-frosted .game-status,
body.ui-frosted .board-wrapper {
    background: rgba(30,41,59,0.6) !important;
    backdrop-filter: blur(40px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(40px) saturate(150%) !important;
    border: 1px solid rgba(148,163,184,0.1) !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.2) !important;
}
body.ui-frosted .mode-card:hover { background: rgba(30,41,59,0.75) !important; border-color: rgba(56,189,248,0.2) !important; }
body.ui-frosted .water-btn {
    background: linear-gradient(135deg, rgba(56,189,248,0.7), rgba(99,102,241,0.6)) !important;
    box-shadow: 0 2px 12px rgba(56,189,248,0.2) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
body.ui-frosted .stat-value, body.ui-frosted .stat-number, body.ui-frosted .go-stat-value, body.ui-frosted .player-timer, body.ui-frosted .logo-text h1 span {
    background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body.ui-frosted .status-indicator { background: #38bdf8 !important; }
body.ui-frosted .chess-board { box-shadow: 0 4px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(148,163,184,0.1) !important; }

/* ============================================================
   THEME 7: AURORA
   ============================================================ */
body.ui-aurora {
    background: linear-gradient(135deg, #0a0a0a 0%, #0d1117 50%, #0a0a0a 100%) !important;
}
body.ui-aurora::before {
    background:
        linear-gradient(45deg, rgba(34,197,94,0.1) 0%, rgba(59,130,246,0.08) 25%, rgba(168,85,247,0.1) 50%, rgba(236,72,153,0.08) 75%, rgba(34,197,94,0.1) 100%) !important;
    background-size: 400% 400% !important;
    animation: auroraShift 15s ease-in-out infinite !important;
}
@keyframes auroraShift { 0%,100%{background-position:0% 50%} 25%{background-position:100% 0%} 50%{background-position:100% 100%} 75%{background-position:0% 100%} }

body.ui-aurora::after {
    content: ''; position: fixed; top: 0; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(34,197,94,0.03) 20%, rgba(59,130,246,0.05) 35%, rgba(168,85,247,0.04) 50%, rgba(236,72,153,0.03) 65%, transparent 80%);
    animation: auroraRibbon 20s ease-in-out infinite; pointer-events: none; z-index: 0;
}
@keyframes auroraRibbon { 0%,100%{transform:translateX(0) rotate(-2deg)} 50%{transform:translateX(-3%) rotate(2deg)} }

body.ui-aurora .mode-card,
body.ui-aurora .learn-card,
body.ui-aurora .setting-group,
body.ui-aurora .player-info,
body.ui-aurora .move-history-panel,
body.ui-aurora .stats-bar,
body.ui-aurora .modal-content,
body.ui-aurora .game-status,
body.ui-aurora .board-wrapper {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
body.ui-aurora .mode-card:hover { border-color: rgba(34,197,94,0.3) !important; box-shadow: 0 8px 32px rgba(34,197,94,0.15), 0 0 60px rgba(34,197,94,0.05) !important; }
body.ui-aurora .water-btn {
    background: linear-gradient(135deg, rgba(34,197,94,0.7), rgba(59,130,246,0.6), rgba(168,85,247,0.5)) !important;
    background-size: 200% 200% !important; animation: auroraBtnFlow 5s ease-in-out infinite !important;
    box-shadow: 0 4px 20px rgba(34,197,94,0.25) !important;
}
@keyframes auroraBtnFlow { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body.ui-aurora .stat-value, body.ui-aurora .stat-number, body.ui-aurora .go-stat-value, body.ui-aurora .player-timer, body.ui-aurora .logo-text h1 span {
    background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
    background-size: 200% 100% !important; animation: auroraText 4s ease-in-out infinite !important;
}
@keyframes auroraText { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
body.ui-aurora .status-indicator { background: #22c55e !important; box-shadow: 0 0 10px #22c55e !important; }
body.ui-aurora .chess-board { box-shadow: 0 4px 30px rgba(34,197,94,0.15), 0 0 0 1px rgba(34,197,94,0.15) !important; }

/* ============================================================
   THEME 8: NEUMORPHISM (Soft UI)
   ============================================================ */
body.ui-neumorphism {
    background: #e0e5ec !important;
}
body.ui-neumorphism::before { background: none !important; }
body.ui-neumorphism .mode-card,
body.ui-neumorphism .learn-card,
body.ui-neumorphism .setting-group,
body.ui-neumorphism .player-info,
body.ui-neumorphism .move-history-panel,
body.ui-neumorphism .stats-bar,
body.ui-neumorphism .modal-content,
body.ui-neumorphism .game-status,
body.ui-neumorphism .board-wrapper {
    background: #e0e5ec !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 20px rgba(163,177,198,0.6), -8px -8px 20px rgba(255,255,255,0.8) !important;
}
body.ui-neumorphism .mode-card:hover, body.ui-neumorphism .learn-card:hover {
    box-shadow: 10px 10px 24px rgba(163,177,198,0.7), -10px -10px 24px rgba(255,255,255,0.9) !important;
}
body.ui-neumorphism .mode-card:active, body.ui-neumorphism .learn-card:active {
    box-shadow: inset 6px 6px 12px rgba(163,177,198,0.5), inset -6px -6px 12px rgba(255,255,255,0.7) !important;
}
body.ui-neumorphism .water-btn {
    background: #e0e5ec !important;
    color: #5b6b8a !important; border: none !important;
    box-shadow: 5px 5px 12px rgba(163,177,198,0.5), -5px -5px 12px rgba(255,255,255,0.7) !important;
}
body.ui-neumorphism .water-btn:hover { box-shadow: 7px 7px 16px rgba(163,177,198,0.6), -7px -7px 16px rgba(255,255,255,0.8) !important; color: #3a4255 !important; }
body.ui-neumorphism .water-btn:active { box-shadow: inset 4px 4px 10px rgba(163,177,198,0.5), inset -4px -4px 10px rgba(255,255,255,0.7) !important; }
/* Text colors for light bg */
body.ui-neumorphism, body.ui-neumorphism h1, body.ui-neumorphism h2, body.ui-neumorphism h3, body.ui-neumorphism h4,
body.ui-neumorphism .mode-card h3, body.ui-neumorphism .section-title, body.ui-neumorphism .setting-group h3,
body.ui-neumorphism .player-name, body.ui-neumorphism .game-title, body.ui-neumorphism .learn-header h2,
body.ui-neumorphism .settings-header h2, body.ui-neumorphism .move-history-panel h4, body.ui-neumorphism #status-text {
    color: #3a4255 !important;
}
body.ui-neumorphism .mode-card p, body.ui-neumorphism .tagline, body.ui-neumorphism .stat-label,
body.ui-neumorphism .player-rating, body.ui-neumorphism .learn-card p, body.ui-neumorphism .setting-row,
body.ui-neumorphism .about-text, body.ui-neumorphism .modal-subtitle, body.ui-neumorphism .text-btn,
body.ui-neumorphism .move-entry .move-number { color: #7a8ba8 !important; }
body.ui-neumorphism .stat-value, body.ui-neumorphism .stat-number, body.ui-neumorphism .go-stat-value, body.ui-neumorphism .player-timer, body.ui-neumorphism .logo-text h1 span {
    background: linear-gradient(135deg, #5b6b8a, #3a4255) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body.ui-neumorphism .icon-btn { background: #e0e5ec !important; border: none !important; box-shadow: 3px 3px 8px rgba(163,177,198,0.4), -3px -3px 8px rgba(255,255,255,0.7) !important; color: #3a4255 !important; }
body.ui-neumorphism .game-menu { background: #e0e5ec !important; border: none !important; box-shadow: 8px 8px 20px rgba(163,177,198,0.6), -8px -8px 20px rgba(255,255,255,0.8) !important; }
body.ui-neumorphism .game-menu button { color: #3a4255 !important; }
body.ui-neumorphism .toggle-slider { background: rgba(163,177,198,0.4) !important; box-shadow: inset 2px 2px 5px rgba(163,177,198,0.5) !important; }
body.ui-neumorphism input:checked + .toggle-slider { background: linear-gradient(135deg, #6366f1, #818cf8) !important; }
body.ui-neumorphism .status-indicator { background: #6366f1 !important; }
body.ui-neumorphism .move-entry { background: rgba(163,177,198,0.15) !important; }
body.ui-neumorphism .move-entry .white-move { color: #3a4255 !important; }
body.ui-neumorphism .move-entry .black-move { color: #6366f1 !important; }
body.ui-neumorphism .game-badge { background: rgba(99,102,241,0.15) !important; color: #6366f1 !important; }
body.ui-neumorphism .chess-board { box-shadow: 8px 8px 20px rgba(163,177,198,0.6), -8px -8px 20px rgba(255,255,255,0.8) !important; }
body.ui-neumorphism .logo-icon, body.ui-neumorphism .chess-icon-animated { filter: none !important; color: #3a4255 !important; }
body.ui-neumorphism .ui-theme-btn { color: #7a8ba8 !important; background: #e0e5ec !important; box-shadow: 3px 3px 6px rgba(163,177,198,0.4), -3px -3px 6px rgba(255,255,255,0.7) !important; }
body.ui-neumorphism .ui-theme-btn.active { border-color: #6366f1 !important; color: #3a4255 !important; box-shadow: inset 3px 3px 6px rgba(163,177,198,0.4), inset -3px -3px 6px rgba(255,255,255,0.7) !important; }
body.ui-neumorphism .theme-btn, body.ui-neumorphism .piece-style-btn { color: #7a8ba8 !important; background: #e0e5ec !important; box-shadow: 2px 2px 5px rgba(163,177,198,0.3), -2px -2px 5px rgba(255,255,255,0.6) !important; }
body.ui-neumorphism .theme-btn.active, body.ui-neumorphism .piece-style-btn.active { border-color: #6366f1 !important; color: #3a4255 !important; }

/* ============================================================
   THEME 9: LIQUID GLASS (Apple-inspired)
   ============================================================ */
body.ui-liquidglass {
    background: linear-gradient(160deg, #1a1625 0%, #0f0f1a 40%, #1a1428 100%) !important;
}
body.ui-liquidglass::before {
    background:
        radial-gradient(circle at 40% 30%, rgba(120,119,198,0.12) 0%, transparent 50%),
        radial-gradient(circle at 60% 70%, rgba(255,154,158,0.08) 0%, transparent 50%) !important;
}
body.ui-liquidglass .mode-card,
body.ui-liquidglass .learn-card,
body.ui-liquidglass .setting-group,
body.ui-liquidglass .player-info,
body.ui-liquidglass .move-history-panel,
body.ui-liquidglass .stats-bar,
body.ui-liquidglass .modal-content,
body.ui-liquidglass .game-menu,
body.ui-liquidglass .game-status,
body.ui-liquidglass .board-wrapper {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(30px) brightness(1.05) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) brightness(1.05) saturate(150%) !important;
    border: 0.5px solid rgba(255,255,255,0.12) !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 30px rgba(0,0,0,0.15), inset 0 0.5px 0 rgba(255,255,255,0.15) !important;
}
body.ui-liquidglass .mode-card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2), inset 0 0.5px 0 rgba(255,255,255,0.2), 0 0 60px rgba(120,119,198,0.05) !important;
}
body.ui-liquidglass .water-btn {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important;
    border: 0.5px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15), inset 0 0.5px 0 rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.9) !important;
}
body.ui-liquidglass .water-btn:hover { background: rgba(255,255,255,0.15) !important; }
body.ui-liquidglass .stat-value, body.ui-liquidglass .stat-number, body.ui-liquidglass .go-stat-value, body.ui-liquidglass .player-timer, body.ui-liquidglass .logo-text h1 span {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(200,200,255,0.7)) !important;
    -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
}
body.ui-liquidglass .icon-btn { background: rgba(255,255,255,0.05) !important; border: 0.5px solid rgba(255,255,255,0.08) !important; }
body.ui-liquidglass .status-indicator { background: rgba(255,255,255,0.6) !important; }
body.ui-liquidglass .chess-board { box-shadow: 0 4px 30px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(255,255,255,0.1) !important; }

/* ============================================================
   UI THEME PICKER STYLES
   ============================================================ */
.ui-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ui-theme-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; background: var(--bg-glass); border: 2px solid transparent;
    border-radius: 14px; cursor: pointer; transition: all 0.3s ease;
    color: var(--text-secondary); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; font-family: 'Inter', sans-serif;
}
.ui-theme-btn.active { border-color: var(--accent-cyan); color: var(--text-primary); }
.ui-theme-btn:hover { transform: translateY(-2px); }
.ui-theme-preview {
    width: 44px; height: 44px; border-radius: 10px; overflow: hidden; position: relative;
}
.utp-water { background: linear-gradient(135deg, #03045e, #023e8a, #0077b6); box-shadow: inset 0 -8px 12px rgba(144,224,239,0.3); }
.utp-glassmorphism { background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; }
.utp-glassmorphism::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }
.utp-crystal { background: linear-gradient(135deg, #0c0c1d, #1a1a3e); position: relative; }
.utp-crystal::after { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(255,100,150,0.3), rgba(100,200,255,0.3), rgba(200,255,100,0.3), rgba(255,100,150,0.3)); opacity: 0.5; border-radius: inherit; }
.utp-liquid { background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); border-radius: 10px 16px 10px 16px; }
.utp-clay { background: linear-gradient(135deg, #f0e6ff, #fce7f3); box-shadow: inset 3px 3px 6px rgba(166,140,200,0.15), inset -2px -2px 4px rgba(255,255,255,0.7); }
.utp-frosted { background: linear-gradient(135deg, #1e293b, #0f172a); position: relative; }
.utp-frosted::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; background: rgba(30,41,59,0.5); border: 1px solid rgba(148,163,184,0.15); }
.utp-aurora { background: #0a0a0a; position: relative; overflow: hidden; }
.utp-aurora::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(34,197,94,0.3), rgba(59,130,246,0.3), rgba(168,85,247,0.3)); animation: auroraPreview 3s ease-in-out infinite; }
@keyframes auroraPreview { 0%,100%{opacity:0.5} 50%{opacity:1} }
.utp-neumorphism { background: #e0e5ec; box-shadow: 3px 3px 6px rgba(163,177,198,0.4), -3px -3px 6px rgba(255,255,255,0.7); }
.utp-liquidglass { background: linear-gradient(160deg, #1a1625, #0f0f1a); position: relative; }
.utp-liquidglass::after { content: ''; position: absolute; inset: 4px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 0.5px solid rgba(255,255,255,0.15); }

/* ============================================================
   PARTICLES
   ============================================================ */
.theme-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.theme-particle {
    position: absolute; border-radius: 50%; pointer-events: none;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { transform: translate(0,0) scale(1); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */
body { transition: background 0.5s ease !important; }
.square {
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 14px !important;
    transform: scale(0.94);
}
.square:hover { transform: scale(0.96) !important; z-index: 10; }
.square:active { transform: scale(0.9) !important; }

/* ================================================================
   CHESS BOARD — FULL IMMERSIVE 3D BUTTON TILE EFFECTS
   Squares are now separate "3D liquid buttons" with deep tactile lighting
   ================================================================ */

/* ---------------------------------------------------------------
   THEME 1: WATER — 3D Liquid Bubbles
   --------------------------------------------------------------- */
body.ui-water .chess-board {
    border-radius: 18px !important;
    background: rgba(0, 30, 60, 0.6) !important;
    box-shadow: 0 20px 60px rgba(0,100,180,0.5), inset 0 2px 10px rgba(0,0,0,0.4) !important;
}
body.ui-water .square.light {
    background: linear-gradient(135deg, #cdecfc 0%, #a6d8f5 100%) !important;
    box-shadow: inset 2px 2px 6px rgba(255,255,255,0.8), inset -2px -2px 6px rgba(0,100,180,0.3), 3px 3px 8px rgba(0,0,0,0.4) !important;
}
body.ui-water .square.dark {
    background: linear-gradient(135deg, #4aa0d6 0%, #2f7cae 100%) !important;
    box-shadow: inset 2px 2px 6px rgba(255,255,255,0.4), inset -2px -2px 6px rgba(0,50,100,0.4), 3px 3px 8px rgba(0,0,0,0.4) !important;
}
body.ui-water .square.light::before {
    content: ''; position: absolute; top: 5%; left: 10%; width: 50%; height: 30%; border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, transparent 100%); pointer-events: none; z-index: 1;
}
body.ui-water .square.dark::before {
    content: ''; position: absolute; top: 5%; left: 10%; width: 50%; height: 30%; border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 100%); pointer-events: none; z-index: 1;
}
body.ui-water .square.selected { background: linear-gradient(135deg, rgba(0,210,255,0.9), rgba(0,160,220,0.8)) !important; box-shadow: inset 2px 2px 6px rgba(255,255,255,0.8), inset -2px -2px 6px rgba(0,100,200,0.5), 0 0 25px rgba(0,220,255,0.6) !important; }
body.ui-water .square.legal-move::after { background: radial-gradient(circle, rgba(0,220,255,0.95) 0%, rgba(0,180,216,0.7) 70%); box-shadow: 0 0 12px rgba(0,220,255,0.8); }
body.ui-water .square.legal-capture::after { border-color: rgba(0,220,255,0.9); box-shadow: 0 0 10px rgba(0,220,255,0.6); }
body.ui-water .square.last-move { background: linear-gradient(135deg, rgba(0,180,216,0.6), rgba(144,224,239,0.5)) !important; }

/* ---------------------------------------------------------------
   THEME 2: GLASSMORPHISM — Thick 3D Glass Tiles
   --------------------------------------------------------------- */
body.ui-glassmorphism .chess-board {
    border-radius: 18px !important;
    background: rgba(10, 15, 40, 0.4) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), inset 0 2px 10px rgba(0,0,0,0.5) !important;
}
body.ui-glassmorphism .square.light {
    background: rgba(180,190,255,0.25) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: inset 2px 2px 10px rgba(255,255,255,0.4), inset -2px -2px 10px rgba(0,0,0,0.2), 3px 3px 10px rgba(0,0,0,0.3) !important;
}
body.ui-glassmorphism .square.dark {
    background: rgba(40,50,160,0.55) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(180,190,255,0.2) !important;
    box-shadow: inset 2px 2px 8px rgba(255,255,255,0.2), inset -2px -2px 8px rgba(0,0,50,0.4), 3px 3px 10px rgba(0,0,0,0.4) !important;
}
body.ui-glassmorphism .square.selected { background: rgba(168,85,247,0.7) !important; border: 1px solid rgba(255,255,255,0.5) !important; box-shadow: inset 0 0 20px rgba(168,85,247,0.6), 0 0 30px rgba(129,140,248,0.5) !important; }
body.ui-glassmorphism .square.legal-move::after { background: rgba(129,140,248,0.95); box-shadow: 0 0 16px rgba(129,140,248,0.8); }
body.ui-glassmorphism .square.legal-capture::after { border-color: rgba(129,140,248,0.95); box-shadow: 0 0 14px rgba(129,140,248,0.7); }
body.ui-glassmorphism .square.last-move { background: rgba(99,102,241,0.5) !important; box-shadow: inset 0 0 10px rgba(99,102,241,0.4) !important; }

/* ---------------------------------------------------------------
   THEME 3: CRYSTAL — Thick Prismatic Gems
   --------------------------------------------------------------- */
body.ui-crystal .chess-board {
    border-radius: 18px !important;
    background: rgba(20, 10, 40, 0.5) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
}
body.ui-crystal .square.light {
    background: linear-gradient(135deg, rgba(200,180,255,0.3) 0%, rgba(200,180,255,0.1) 100%) !important;
    border: 1px solid rgba(255,100,200,0.4) !important;
    box-shadow: inset 3px 3px 10px rgba(255,255,255,0.4), inset -3px -3px 10px rgba(100,50,150,0.4), 4px 4px 12px rgba(0,0,0,0.5) !important;
}
body.ui-crystal .square.dark {
    background: linear-gradient(135deg, rgba(80,40,160,0.7) 0%, rgba(50,20,100,0.8) 100%) !important;
    border: 1px solid rgba(100,200,255,0.3) !important;
    box-shadow: inset 3px 3px 10px rgba(200,150,255,0.3), inset -3px -3px 10px rgba(0,0,0,0.6), 4px 4px 12px rgba(0,0,0,0.6) !important;
}
body.ui-crystal .square.selected { background: rgba(255,80,200,0.7) !important; box-shadow: inset 3px 3px 15px rgba(255,200,255,0.6), inset -3px -3px 15px rgba(150,0,100,0.5), 0 0 30px rgba(255,100,200,0.5) !important; }
body.ui-crystal .square.legal-move::after { background: conic-gradient(rgba(255,100,150,0.9),rgba(100,200,255,0.9),rgba(200,255,100,0.9),rgba(255,100,150,0.9)); box-shadow: 0 0 15px rgba(200,100,255,0.7); animation: crystalDotSpin 2s linear infinite; }
body.ui-crystal .square.legal-capture::after { border-color: rgba(200,100,255,0.9); box-shadow: 0 0 12px rgba(200,100,255,0.6); animation: crystalDotSpin 2s linear infinite; }
body.ui-crystal .square.last-move { background: rgba(150,50,255,0.4) !important; }


/* ---------------------------------------------------------------
   THEME 4: LIQUID — 3D Organic Gel Tiles
   --------------------------------------------------------------- */
body.ui-liquid .chess-board {
    border-radius: 20px !important;
    background: rgba(40, 20, 80, 0.4) !important;
    box-shadow: 0 20px 60px rgba(100,30,220,0.4), inset 0 2px 10px rgba(0,0,0,0.5) !important;
}
body.ui-liquid .square.light {
    background: linear-gradient(135deg, rgba(200,160,255,0.4) 0%, rgba(160,120,255,0.3) 100%) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: inset 4px 4px 10px rgba(255,255,255,0.3), inset -4px -4px 10px rgba(0,0,0,0.2), 3px 3px 8px rgba(0,0,0,0.3) !important;
}
body.ui-liquid .square.dark {
    background: linear-gradient(135deg, rgba(100,60,180,0.8) 0%, rgba(60,20,120,0.9) 100%) !important;
    border: 1px solid rgba(150,100,255,0.2) !important;
    box-shadow: inset 4px 4px 10px rgba(200,150,255,0.2), inset -4px -4px 10px rgba(0,0,0,0.5), 3px 3px 8px rgba(0,0,0,0.4) !important;
}
body.ui-liquid .square.selected { background: linear-gradient(135deg, rgba(167,139,250,0.9), rgba(124,58,237,0.8)) !important; box-shadow: inset 4px 4px 15px rgba(255,255,255,0.5), inset -4px -4px 15px rgba(100,0,200,0.6), 0 0 25px rgba(147,51,234,0.6) !important; }
body.ui-liquid .square.legal-move::after { background: radial-gradient(circle, rgba(192,132,252,0.95) 0%, rgba(147,51,234,0.6) 100%); box-shadow: 0 0 12px rgba(167,139,250,0.7); }
body.ui-liquid .square.legal-capture::after { border-color: rgba(167,139,250,0.9); box-shadow: 0 0 10px rgba(147,51,234,0.5); }
body.ui-liquid .square.last-move { background: linear-gradient(135deg, rgba(124,58,237,0.5), rgba(99,102,241,0.4)) !important; }

/* ---------------------------------------------------------------
   THEME 5: CLAYMORPHISM — 3D Physical Clay Tiles
   --------------------------------------------------------------- */
body.ui-claymorphism .chess-board {
    border-radius: 20px !important;
    background: #e2cbf0 !important;
    box-shadow: inset 4px 4px 10px rgba(150,120,180,0.5), inset -4px -4px 10px rgba(255,255,255,0.8), 10px 10px 24px rgba(166,140,200,0.3) !important;
}
body.ui-claymorphism .square.light {
    background: linear-gradient(145deg, #eeddf8 0%, #e0ccf0 100%) !important;
    box-shadow: inset 3px 3px 6px rgba(255, 255, 255, 0.9), inset -3px -3px 6px rgba(180, 140, 220, 0.4), 4px 4px 8px rgba(160, 130, 200, 0.3) !important;
}
body.ui-claymorphism .square.dark {
    background: linear-gradient(145deg, #c09fd8 0%, #b08ccc 100%) !important;
    box-shadow: inset 3px 3px 6px rgba(220, 190, 255, 0.5), inset -3px -3px 6px rgba(80, 40, 120, 0.4), 4px 4px 8px rgba(160, 130, 200, 0.3) !important;
}
body.ui-claymorphism .square.selected {
    background: linear-gradient(145deg, rgba(192,132,252,0.9), rgba(167,139,250,1)) !important;
    box-shadow: inset 3px 3px 8px rgba(255,255,255,0.5), inset -3px -3px 8px rgba(100,50,180,0.5), 5px 5px 12px rgba(147,51,234,0.4) !important;
}
body.ui-claymorphism .square.legal-move::after { background: radial-gradient(circle, rgba(192,132,252,0.9) 0%, rgba(167,139,250,0.6) 100%); box-shadow: 3px 3px 8px rgba(147,51,234,0.3), -1px -1px 4px rgba(255,255,255,0.5); }
body.ui-claymorphism .square.legal-capture::after { border-color: rgba(192,132,252,0.85); box-shadow: 2px 2px 6px rgba(147,51,234,0.25); }
body.ui-claymorphism .square.last-move { background: linear-gradient(145deg, rgba(216,180,254,0.6), rgba(196,156,248,0.5)) !important; }
body.ui-claymorphism .piece-white { color: #fff !important; filter: drop-shadow(0 4px 6px rgba(100,50,200,0.5)) drop-shadow(0 1px 2px rgba(0,0,0,0.2)) !important; }
body.ui-claymorphism .piece-black { color: #2d1b4e !important; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4)) drop-shadow(0 1px 2px rgba(255,255,255,0.3)) !important; }


/* ---------------------------------------------------------------
   THEME 6: FROSTED ACRYLIC — 3D Heavy Blur Tiles
   --------------------------------------------------------------- */
body.ui-frosted .chess-board {
    border-radius: 20px !important;
    background: rgba(10, 30, 50, 0.4) !important;
    backdrop-filter: blur(25px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(130%) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), inset 0 2px 10px rgba(0,0,0,0.5) !important;
}
body.ui-frosted .square.light {
    background: rgba(200,215,235,0.45) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: inset 2px 2px 8px rgba(255,255,255,0.4), inset -2px -2px 8px rgba(0,0,0,0.2), 3px 3px 8px rgba(0,0,0,0.3) !important;
}
body.ui-frosted .square.dark {
    background: rgba(20,50,90,0.7) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(100,160,255,0.2) !important;
    box-shadow: inset 2px 2px 8px rgba(100,160,255,0.2), inset -2px -2px 8px rgba(0,0,0,0.4), 3px 3px 8px rgba(0,0,0,0.4) !important;
}
body.ui-frosted .square.selected { background: rgba(56,189,248,0.7) !important; border: 1px solid rgba(255,255,255,0.4) !important; box-shadow: inset 2px 2px 15px rgba(255,255,255,0.6), inset -2px -2px 15px rgba(0,100,200,0.5), 0 0 25px rgba(56,189,248,0.5) !important; }
body.ui-frosted .square.legal-move::after { background: rgba(56,189,248,0.9); box-shadow: 0 0 16px rgba(56,189,248,0.8); }
body.ui-frosted .square.legal-capture::after { border-color: rgba(56,189,248,0.9); box-shadow: 0 0 14px rgba(56,189,248,0.6); }
body.ui-frosted .square.last-move { background: rgba(56,189,248,0.4) !important; backdrop-filter: blur(10px); }

/* ---------------------------------------------------------------
   THEME 7: AURORA — Glowing 3D Pulse Tiles
   --------------------------------------------------------------- */
body.ui-aurora .chess-board {
    border-radius: 20px !important;
    background: rgba(5, 15, 5, 0.6) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 2px 10px rgba(0,0,0,0.6) !important;
}
body.ui-aurora .square.light {
    background: linear-gradient(135deg, rgba(30,50,30,0.8) 0%, rgba(20,40,25,0.9) 100%) !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
    box-shadow: inset 2px 2px 6px rgba(50,255,100,0.2), inset -2px -2px 6px rgba(0,0,0,0.6), 3px 3px 8px rgba(0,0,0,0.5) !important;
}
body.ui-aurora .square.dark {
    background: linear-gradient(135deg, rgba(5,25,10,0.95) 0%, rgba(5,15,5,1) 100%) !important;
    border: 1px solid rgba(34,197,94,0.15) !important;
    box-shadow: inset 2px 2px 6px rgba(34,197,94,0.1), inset -2px -2px 6px rgba(0,0,0,0.8), 3px 3px 8px rgba(0,0,0,0.6) !important;
}
body.ui-aurora .square.selected { background: linear-gradient(135deg, rgba(34,197,94,0.8), rgba(59,130,246,0.7)) !important; border: 1px solid rgba(200,255,200,0.5) !important; box-shadow: inset 2px 2px 15px rgba(200,255,200,0.4), inset -2px -2px 15px rgba(0,50,0,0.6), 0 0 30px rgba(34,197,94,0.5) !important; }
body.ui-aurora .square.legal-move::after { background: radial-gradient(circle, rgba(34,197,94,0.95) 0%, rgba(59,130,246,0.8) 100%); box-shadow: 0 0 20px rgba(34,197,94,0.9); }
body.ui-aurora .square.legal-capture::after { border-color: rgba(34,197,94,0.95); box-shadow: 0 0 16px rgba(34,197,94,0.8); }
body.ui-aurora .square.last-move { background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(34,197,94,0.3)) !important; }

/* ---------------------------------------------------------------
   THEME 8: NEUMORPHISM — 3D Hard Pressed Light Mat
   --------------------------------------------------------------- */
body.ui-neumorphism .chess-board {
    border-radius: 20px !important;
    background: #e0e5ec !important;
    box-shadow: inset 5px 5px 12px rgba(163,177,198,0.5), inset -5px -5px 12px rgba(255,255,255,0.8) !important;
}
body.ui-neumorphism .square.light {
    background: #e6ebf2 !important;
    box-shadow: 4px 4px 8px rgba(163,177,198,0.6), -4px -4px 8px rgba(255,255,255,0.8), inset 2px 2px 4px rgba(255,255,255,0.5) !important;
}
body.ui-neumorphism .square.dark {
    background: #d4dde8 !important;
    box-shadow: 4px 4px 8px rgba(163,177,198,0.6), -4px -4px 8px rgba(255,255,255,0.8), inset 2px 2px 4px rgba(255,255,255,0.4) !important;
}
body.ui-neumorphism .square.selected { background: #d0d8e8 !important; box-shadow: inset 5px 5px 12px rgba(148,162,185,0.8), inset -3px -3px 8px rgba(255,255,255,0.9), 0 0 0 2px rgba(99,102,241,0.6) !important; }
body.ui-neumorphism .square.legal-move::after { background: rgba(99,102,241,0.8); box-shadow: 3px 3px 8px rgba(148,162,185,0.5), -1px -1px 4px rgba(255,255,255,0.7); }
body.ui-neumorphism .square.legal-capture::after { border-color: rgba(99,102,241,0.8); box-shadow: 2px 2px 6px rgba(148,162,185,0.4); }
body.ui-neumorphism .square.last-move { background: #d8dff0 !important; box-shadow: inset 3px 3px 6px rgba(148,162,185,0.6), inset -3px -3px 6px rgba(255,255,255,0.8) !important; }
body.ui-neumorphism .piece-white { color: #fff !important; filter: drop-shadow(0 4px 6px rgba(100,120,150,0.6)) drop-shadow(0 1px 2px rgba(255,255,255,0.4)) !important; }
body.ui-neumorphism .piece-black { color: #2a3548 !important; filter: drop-shadow(0 4px 6px rgba(163,177,198,0.7)) drop-shadow(0 1px 2px rgba(255,255,255,0.3)) !important; }

/* ---------------------------------------------------------------
   THEME 9: LIQUID GLASS — 3D Apple Clear Keys
   --------------------------------------------------------------- */
body.ui-liquidglass .chess-board {
    border-radius: 24px !important;
    background: rgba(20, 15, 50, 0.4) !important;
    backdrop-filter: blur(25px) brightness(1.1) saturate(150%) !important;
    -webkit-backdrop-filter: blur(25px) brightness(1.1) saturate(150%) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 2px 10px rgba(0,0,0,0.4) !important;
}
body.ui-liquidglass .square.light {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(15px) brightness(1.1) !important;
    -webkit-backdrop-filter: blur(15px) brightness(1.1) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: inset 2px 2px 8px rgba(255,255,255,0.4), inset -2px -2px 8px rgba(120,120,200,0.1), 3px 3px 10px rgba(0,0,0,0.3) !important;
}
body.ui-liquidglass .square.dark {
    background: rgba(30,25,70,0.7) !important;
    backdrop-filter: blur(15px) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(15px) brightness(0.9) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: inset 2px 2px 8px rgba(200,200,255,0.2), inset -2px -2px 8px rgba(0,0,0,0.5), 3px 3px 10px rgba(0,0,0,0.4) !important;
}
body.ui-liquidglass .square.selected { background: rgba(255,255,255,0.3) !important; border: 1px solid rgba(255,255,255,0.6) !important; box-shadow: inset 2px 2px 15px rgba(255,255,255,0.6), inset -2px -2px 15px rgba(100,100,200,0.4), 0 0 30px rgba(200,200,255,0.4) !important; }
body.ui-liquidglass .square.legal-move::after { background: rgba(255,255,255,0.85); box-shadow: 0 0 16px rgba(255,255,255,0.8), 0 0 6px rgba(200,200,255,0.9); }
body.ui-liquidglass .square.legal-capture::after { border-color: rgba(255,255,255,0.85); box-shadow: 0 0 14px rgba(255,255,255,0.7); }
body.ui-liquidglass .square.last-move { background: rgba(120,119,198,0.4) !important; box-shadow: inset 0 2px 4px rgba(255,255,255,0.2) !important; }
body.ui-liquidglass .piece-white { color: rgba(255,255,255,0.95) !important; filter: drop-shadow(0 4px 10px rgba(255,255,255,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.6)) !important; }
body.ui-liquidglass .piece-black { color: rgba(100,90,180,0.95) !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 10px rgba(120,119,198,0.4)) !important; }

/* ================================================================
   CHECK HIGHLIGHT — per theme
   ================================================================ */
body.ui-water .square.in-check         { background: rgba(239,68,68,0.6) !important; box-shadow: inset 0 0 20px rgba(239,68,68,0.5), 0 0 20px rgba(239,68,68,0.3) !important; }
body.ui-glassmorphism .square.in-check { background: rgba(239,68,68,0.5) !important; backdrop-filter: blur(8px); box-shadow: inset 0 0 20px rgba(239,68,68,0.4) !important; }
body.ui-crystal .square.in-check       { background: rgba(255,50,100,0.65) !important; box-shadow: inset 0 0 25px rgba(255,50,100,0.5), 0 0 20px rgba(255,50,100,0.4) !important; animation: crystalCheckPulse 0.8s ease-in-out infinite; }
@keyframes crystalCheckPulse { 0%,100%{filter:hue-rotate(0deg)} 50%{filter:hue-rotate(30deg)} }
body.ui-liquid .square.in-check        { background: rgba(239,68,68,0.6) !important; box-shadow: inset 0 0 20px rgba(239,68,68,0.4) !important; }
body.ui-claymorphism .square.in-check  { background: linear-gradient(145deg,rgba(239,68,68,0.5),rgba(220,50,50,0.4)) !important; box-shadow: 4px 4px 10px rgba(200,50,50,0.3), -2px -2px 6px rgba(255,200,200,0.4) !important; }
body.ui-frosted .square.in-check       { background: rgba(239,68,68,0.5) !important; backdrop-filter: blur(10px); box-shadow: inset 0 0 20px rgba(239,68,68,0.35) !important; }
body.ui-aurora .square.in-check        { background: rgba(239,68,68,0.55) !important; box-shadow: inset 0 0 25px rgba(239,68,68,0.5), 0 0 25px rgba(239,68,68,0.4) !important; animation: auroraCheck 1s ease-in-out infinite; }
@keyframes auroraCheck { 0%,100%{box-shadow:inset 0 0 25px rgba(239,68,68,0.5),0 0 25px rgba(239,68,68,0.4)} 50%{box-shadow:inset 0 0 30px rgba(255,100,50,0.6),0 0 30px rgba(255,100,50,0.5)} }
body.ui-neumorphism .square.in-check   { background: #e8c5c5 !important; box-shadow: inset 4px 4px 10px rgba(200,80,80,0.35), inset -3px -3px 8px rgba(255,200,200,0.5) !important; }
body.ui-liquidglass .square.in-check   { background: rgba(239,68,68,0.4) !important; backdrop-filter: blur(15px); box-shadow: inset 0 0 20px rgba(239,68,68,0.35), 0 0 15px rgba(239,68,68,0.2) !important; }