/* ChessElementa Themes - Combined File
   Contains: Glass, Wood, and Ink themes
   ============================================ */

/* ============================================
   GLASS THEME - Modern Dark Effects
   ============================================ */

/* Animated gradient background */
body.theme-glass {
    animation: gradientBG 20s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Glass header effects */
.theme-glass header {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.theme-glass header h1,
.theme-glass .logo {
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 50%, #818cf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass panel hover glow */
.theme-glass .sidebar:hover {
    box-shadow:
        var(--panel-shadow),
        0 0 40px rgba(139, 92, 246, 0.1);
}

/* Glass board glow */
.theme-glass #game-board {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Glass cell hover effect */
.theme-glass .cell:hover {
    box-shadow:
        inset 0 0 15px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(139, 92, 246, 0.1);
}

/* Glass selected cell glow */
.theme-glass .cell.selected {
    box-shadow:
        var(--cell-selected-shadow),
        0 0 30px rgba(34, 211, 238, 0.2);
}

/* Glass button hover glow */
.theme-glass .btn:hover {
    box-shadow:
        var(--btn-hover-shadow),
        0 0 25px rgba(139, 92, 246, 0.3);
}

/* Glass input focus glow */
.theme-glass .level-select:focus,
.theme-glass .editor-input-group input:focus,
.theme-glass .editor-input-group textarea:focus {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.25);
}

/* Glass dropdown optgroup fixes */
.theme-glass .level-select optgroup,
.theme-glass .editor-input-group select optgroup {
    background: var(--input-option-bg);
    color: var(--text-main);
}

/* Glass red piece styling */
.theme-glass .piece.red {
    font-weight: normal;
    box-shadow:
        0 4px 8px rgba(185, 28, 28, 0.4),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(239, 68, 68, 0.2);
}

/* Glass element glow */
.theme-glass .element {
    filter:
        drop-shadow(0 0 10px var(--element-glow)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.3));
}

/* Glass big move number */
.theme-glass .big-move-number {
    text-shadow:
        0 0 30px rgba(139, 92, 246, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Glass moves number in header */
.theme-glass .moves-number {
    text-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* Glass wall styling - subtle glow for visibility */
.theme-glass .cell.wall {
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 5px,
            rgba(100, 100, 180, 0.15) 5px,
            rgba(100, 100, 180, 0.15) 6px);
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(100, 100, 180, 0.15);
}

/* Glass river styling */
.theme-glass .cell.river {
    box-shadow: inset 0 0 15px rgba(34, 211, 238, 0.1);
}

/* Glass status section styling */
.theme-glass .status-section {
    border-radius: var(--panel-radius);
    padding: var(--gap-lg);
}

/* Glass bottom bar */
.theme-glass .mobile-bottom-bar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Glass tool button active state */
.theme-glass .tool-btn.active {
    box-shadow:
        var(--tool-btn-active-shadow),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Glass bench item selected state */
.theme-glass .bench-item.selected {
    box-shadow:
        var(--bench-item-selected-shadow),
        inset 0 0 10px rgba(34, 211, 238, 0.1);
}

/* ============================================
   WOOD THEME - Warm Skeuomorphic Effects
   ============================================ */

/* Wood body with grain texture */
.theme-wood {
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 200, 150, 0.02) 0px,
            transparent 1px,
            transparent 8px),
        repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.03) 0px,
            transparent 1px,
            transparent 4px),
        radial-gradient(ellipse at 30% 20%, #4a3020 0%, #1c0f0a 100%);
}

/* Wood header with beveled edge */
.theme-wood header {
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 180, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.5);
}

.theme-wood header h1,
.theme-wood .logo {
    color: #fef3c7;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.3);
    background: none;
    -webkit-text-fill-color: initial;
}

/* Wood panel styling with grain */
.theme-wood .sidebar {
    background-image:
        repeating-linear-gradient(180deg,
            rgba(255, 220, 180, 0.03) 0px,
            transparent 2px,
            transparent 12px),
        var(--panel-bg);
    box-shadow:
        inset 1px 0 0 rgba(255, 220, 180, 0.1),
        inset -1px 0 0 rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 220, 180, 0.15),
        var(--panel-shadow);
}

/* Wood h3 styling */
.theme-wood h3 {
    color: #fde68a;
    border-bottom: 2px solid #6d5344;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Wood button styling - embossed */
.theme-wood .btn {
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-wood .btn:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 10px rgba(0, 0, 0, 0.4);
}

.theme-wood .btn:active {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Wood inputs with inset shadow */
.theme-wood .level-select,
.theme-wood .editor-input-group input,
.theme-wood .editor-input-group select,
.theme-wood .editor-input-group textarea {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* Wood board with lighting effect */
.theme-wood #game-board {
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(255, 240, 200, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(60, 30, 0, 0.4) 100%);
    background-color: var(--board-bg);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(0, 0, 0, 0.15),
        inset 0 2px 0 rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

/* Wood cell styling */
.theme-wood .cell {
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(80, 50, 20, 0.15);
}

.theme-wood .cell:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 0 0 1px rgba(80, 50, 20, 0.15),
        inset 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Wood wall styling - stone block */
.theme-wood .cell.wall {
    background:
        linear-gradient(145deg, #6b6560 0%, #4a4540 50%, #3d3835 100%);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.15),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}

/* Wood river styling with depth */
.theme-wood .cell.river {
    box-shadow:
        inset 0 0 8px rgba(0, 80, 160, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 0;
}

.theme-wood .cell.river.horizontal {
    background-image: linear-gradient(to bottom,
            rgba(120, 200, 255, 0.25) 0%,
            rgba(40, 140, 200, 0.35) 40%,
            rgba(40, 140, 200, 0.35) 60%,
            rgba(120, 200, 255, 0.25) 100%);
}

.theme-wood .cell.river.vertical {
    background-image: linear-gradient(to right,
            rgba(120, 200, 255, 0.25) 0%,
            rgba(40, 140, 200, 0.35) 40%,
            rgba(40, 140, 200, 0.35) 60%,
            rgba(120, 200, 255, 0.25) 100%);
}

.theme-wood .cell.river::before {
    color: rgba(200, 230, 255, 0.4);
    text-shadow: 0 1px 2px rgba(0, 50, 100, 0.3);
}

/* Wood pit styling - warm concave hole */
.theme-wood .cell.pit::after {
    box-shadow:
        inset 0 0 15px rgba(60, 40, 20, 0.8),
        inset 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* Wood piece styling - polished tokens */
.theme-wood .piece,
.theme-wood .bench-item .piece-symbol {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 -4px 6px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(255, 255, 255, 0.35);
}

.theme-wood .piece.red,
.theme-wood .bench-item .piece-symbol.red {
    font-weight: bold;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.5),
        inset 0 -4px 6px rgba(180, 100, 0, 0.4),
        inset 0 3px 6px rgba(255, 255, 200, 0.4);
}

.theme-wood .piece.black,
.theme-wood .bench-item .piece-symbol.black {
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.6),
        inset 0 -4px 6px rgba(0, 0, 0, 0.5),
        inset 0 3px 6px rgba(255, 255, 255, 0.2);
}

/* Wood element styling */
.theme-wood .element {
    text-shadow:
        0 0 8px rgba(255, 240, 100, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.6);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Wood big move number */
.theme-wood .big-move-number {
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Wood moves number in header */
.theme-wood .moves-number {
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Wood status section */
.theme-wood .status-section {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: var(--gap-lg);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* Wood bottom bar */
.theme-wood .mobile-bottom-bar {
    box-shadow:
        inset 0 1px 0 rgba(255, 220, 180, 0.15),
        0 -4px 12px rgba(0, 0, 0, 0.4);
}

.theme-wood .bottom-btn {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Wood tool button active state */
.theme-wood .tool-btn.active,
.theme-wood .color-btn.active {
    color: #3e2723;
    border-color: #ea580c;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 8px rgba(245, 158, 11, 0.3);
}

/* Wood history styling */
.theme-wood #move-history {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Wood editor hint */
.theme-wood .editor-hint {
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-wood .ai-glow::after {
    background: conic-gradient(from 0deg,
            transparent 0%,
            transparent 65%,
            rgba(255, 230, 1, 0.1) 72%,
            rgba(255, 230, 0, 0.2) 78%,
            rgba(255, 230, 0, 0.35) 84%,
            rgba(255, 230, 0, 0.55) 90%,
            rgba(255, 230, 0, 0.75) 95%,
            #ffff00 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent 78%, #fff 80%, #fff 92%, transparent 94%);
    mask: radial-gradient(farthest-side, transparent 78%, #fff 80%, #fff 92%, transparent 94%);
}

.theme-wood .ai-glow::before {
    background: radial-gradient(circle at 50% 6px, #ffff00 0%, #ffff00 3px, transparent 4px, transparent 100%);
    filter: drop-shadow(0 0 5px #ffff00) drop-shadow(0 0 10px #ffff00);
}

@media (max-width: 767px) {
    .theme-wood .ai-glow::before {
        background: radial-gradient(circle at 50% 8%, #ffff00 0%, #ffff00 3px, transparent 4px, transparent 100%);
    }
}

/* ============================================
   INK THEME - Traditional Chinese Ink Wash
   ============================================ */

.theme-ink {
    /* ----- Palette ----- */
    /* Primary: Deep Ink Black */
    --ink-black: #101010;
    /* Secondary: Diluted Ink Grey */
    --ink-grey: #52525b;
    /* Background: Rice Paper Beige */
    --paper-bg: #fdfbf7;
    /* Accent: Cinnabar Red */
    --seal-red: #000000;
    /* Highlight: Gold Leaf */
    --gold-leaf: #7b7b7b;

    /* ----- Variables Overrides ----- */
    --primary-color: var(--ink-black);
    --primary-color-dim: rgba(0, 0, 0, 0.05);
    --secondary-color: var(--ink-grey);
    --accent-color: var(--seal-red);
    --accent-warm: var(--gold-leaf);

    /* ----- Piece Styling ----- */
    /* Red pieces: White Stone / Paper with Red Seal Characters */
    --red-piece-bg: #ffffff;
    --red-piece-border: var(--seal-red);
    --red-piece-text: var(--seal-red);
    --red-piece-shadow:
        0 2px 5px rgba(0, 0, 0, 0.1),
        inset 0 0 10px rgba(185, 28, 28, 0.05);

    /* Black pieces: Dense Black Ink Stone */
    --black-piece-bg: #1a1a1a;
    --black-piece-border: #1a1a1a;
    --black-piece-text: #f5f5f5;
    --black-piece-shadow:
        0 3px 6px rgba(0, 0, 0, 0.3);

    /* --element-color: var(--gold-leaf);
    --element-glow: rgba(50, 50, 50, 0.3); */
    --element-color: #fbbf24;
    --element-glow: rgba(251, 191, 36, 0.5);

    /* ----- Text Colors ----- */
    --text-main: #1a1a1a;
    --text-secondary: #4b5563;
    --text-muted: #71717a;
    --text-dim: #a1a1aa;
    --level-title-color: var(--seal-red);

    /* ----- Environment ----- */
    /* Body Background - Rice Paper Texture */
    --body-bg: #fdfbf7;
    --body-bg-size: auto;

    /* Panels - Clean White Paper */
    --panel-bg: rgba(255, 255, 255, 0.9);
    --panel-bg-solid: #ffffff;
    --panel-border: 1px solid #e5e5e5;
    --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --panel-blur: blur(8px);

    /* Header */
    --header-bg: rgba(255, 255, 255, 0.95);
    --header-border: 1px solid #e5e5e5;
    /* --header-logo-filter: saturate(0.0); */

    /* Board - White Canvas with Ink Lines */
    --board-bg: #ffffff;
    /* Traditional mounting style border */
    --board-border: 6px solid #e5e5e5;
    --board-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    --board-blur: none;

    /* Cells - Minimalist Lines */
    --cell-bg: transparent;
    --cell-border: 1px solid #e5e5e5;
    --cell-hover-bg: rgba(0, 0, 0, 0.03);
    --cell-hover-border: rgba(0, 0, 0, 0.2);

    /* Selected State - Red Brush Circle */
    --cell-selected-bg: rgba(185, 28, 28, 0.03);
    --cell-selected-border: var(--seal-red);
    --cell-selected-shadow: inset 0 0 0 1px var(--seal-red);

    --cell-valid-bg: rgba(0, 0, 0, 0.03);

    --move-indicator-bg: var(--ink-black);
    --move-indicator-shadow: none;

    --capture-indicator-bg: var(--seal-red);
    --capture-indicator-shadow: none;

    --capture-cell-shadow: inset 0 0 10px rgba(185, 28, 28, 0.1);
    --capture-cell-border: rgba(255, 0, 0, 0.4);

    /* Terrain */
    --wall-bg: #e5e5e5;
    --wall-border: 1px solid #d4d4d8;

    --river-bg: rgba(212, 212, 212, 0.4);
    /* Very faint blue wash */
    --river-border: none;
    --river-symbol-color: rgba(187, 187, 187, 0.5);

    --pit-gradient: radial-gradient(circle at 50% 50%, #363636 25%, #818181 50%, transparent 70%);

    /* Buttons - Seal Style */
    --btn-bg: #fff;
    --btn-hover-bg: #f9fafb;
    --btn-text: var(--ink-black);
    --btn-border: 1px solid var(--ink-black);
    --btn-shadow: 2px 2px 0 var(--ink-black);
    --btn-hover-shadow: 3px 3px 0 var(--ink-black);

    --btn-disabled-bg: #f4f4f5;
    --btn-disabled-text: #a1a1aa;
    --btn-disabled-border: 1px solid #d4d4d8;

    /* Inputs */
    --input-bg: #fff;
    --input-border: 1px solid #d4d4d8;
    --input-focus-border: var(--ink-black);
    --input-focus-bg: #fafafa;
    --input-option-bg: #fff;

    /* History */
    --history-bg: #fafafa;
    --history-border: 1px solid #e5e5e5;
    --history-item-border: 1px solid #f4f4f5;
    --history-current-bg: rgba(0, 0, 0, 0.05);

    /* Status Messages */
    --status-error-bg: #fef2f2;
    --status-error-text: #991b1b;
    --status-error-border: #fca5a5;

    --status-success-bg: #f0fdf4;
    --status-success-text: #166534;
    --status-success-border: #86efac;

    --status-info-bg: #f0f9ff;
    --status-info-text: #0c4a6e;
    --status-info-border: #bae6fd;

    /* Editor */
    --tool-btn-bg: #f4f4f5;
    --tool-btn-hover-bg: #e4e4e7;
    --tool-btn-active-bg: var(--ink-black);
    --tool-btn-active-shadow: none;

    --bench-item-bg: #fff;
    --bench-item-hover-bg: #f4f4f5;
    --bench-item-selected-border: var(--ink-black);
    --bench-item-selected-bg: #f4f4f5;
    --bench-item-selected-shadow: none;

    --mode-toggle-bg: #fff;
    --mode-toggle-border: 1px solid #d4d4d8;
    --mode-toggle-active-bg: #fff;
    --mode-toggle-active-text: #166534;
    --mode-toggle-active-border: #166534;

    /* Area Damage */
    --area-damage-bg: rgba(185, 28, 28, 0.08);

    /* Scrollbar */
    --scrollbar-track: #f4f4f5;
    --scrollbar-thumb: #d4d4d8;
    --scrollbar-thumb-hover: #a1a1aa;

    /* Win/Lose */
    --win-color: rgba(255, 255, 255, 1);
    --lose-color: rgba(255, 255, 255, 1);
    --btn-win-bg: rgba(133, 133, 133, 0.4);
    --btn-win-shadow: 0 4px 6px var(--ink-black);
    --btn-lose-bg: rgba(126, 126, 126, 0.4);
    --btn-lose-shadow: 0 4px 6px var(--ink-black);

    /* Mobile Bottom Bar */
    --bottom-bar-bg: #ffffff;
    --bottom-bar-border: 1px solid #e5e5e5;
    --bottom-btn-bg: #f4f4f5;
    --bottom-btn-hover-bg: #e4e4e7;

    --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(0, 0, 0, 0.2);
    --help-btn-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

/* --- Specific Override Styling for Ink Theme --- */

.theme-ink {
    /* Ink Wash with Cloud Pattern */
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(180, 175, 165, 0.25) 0%, transparent 45%),
        radial-gradient(ellipse at 100% 100%, rgba(180, 175, 165, 0.2) 0%, transparent 40%),
        radial-gradient(ellipse at 100% 0%, rgba(180, 175, 165, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 0% 100%, rgba(180, 175, 165, 0.1) 0%, transparent 30%);
    background-color: var(--paper-bg);
}

/* Fonts */
.theme-ink .piece {
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 1px;
}

/* Wall Hatching */
.theme-ink .cell.wall {
    background-image: repeating-linear-gradient(45deg,
            transparent,
            transparent 5px,
            #d4d4d8 5px,
            #d4d4d8 6px);
    border: 1px solid #a1a1aa;
}

/* Force Light Theme Colors on Body */
body.theme-ink {
    color: #1a1a1a !important;
    background-color: #fdfbf7 !important;
}

/* Customize Tool Buttons for Contrast */
.theme-ink .tool-btn.active {
    background-color: #1a1a1a;
    color: #fff;
}

.theme-ink .ai-glow::after {
    background: conic-gradient(from 0deg,
            transparent 0%,
            transparent 65%,
            rgba(0, 0, 0, 0.1) 72%,
            rgba(0, 0, 0, 0.2) 78%,
            rgba(0, 0, 0, 0.35) 84%,
            rgba(0, 0, 0, 0.55) 90%,
            rgba(0, 0, 0, 0.75) 95%,
            #000000 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent 78%, #fff 80%, #fff 92%, transparent 94%);
    mask: radial-gradient(farthest-side, transparent 78%, #fff 80%, #fff 92%, transparent 94%);
}

.theme-ink .ai-glow::before {
    background: radial-gradient(circle at 50% 6px, #000000 0%, #000000 3px, transparent 4px, transparent 100%);
    filter: drop-shadow(0 0 5px #000000) drop-shadow(0 0 10px #000000);
}

@media (max-width: 767px) {
    .theme-ink .ai-glow::before {
        background: radial-gradient(circle at 50% 8%, #000000 0%, #000000 3px, transparent 4px, transparent 100%);
    }
}

.theme-ink .sidebar-divider {
    padding-bottom: var(--gap-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-ink .element {
    filter:
        drop-shadow(0 0 10px var(--element-glow)) drop-shadow(0 0 20px rgba(251, 191, 36, 0.3));
}