/* 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 */
/* Performance: Removed backdrop-filter - invisible effect (solid bg behind board) but high GPU cost */
.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);
}

.theme-glass .splash-ring .ring-progress,
.splash-ring .ring-progress {
    stroke: #8b5cf6;
    color: #8b5cf6;
    /* for currentColor */
}

/* ============================================
   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%); */
    background: radial-gradient(circle at 50% calc(var(--piece-size-computed, 48px) * 0.105), #ffff00 0%, #ffff00 calc(var(--piece-size-computed, 48px) * 0.06), transparent calc(var(--piece-size-computed, 48px) * 0.08), 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% 6%, #ffff00 0%, #ffff00 3px, transparent 4px, transparent 100%); */
        background: radial-gradient(circle at 50% calc(var(--piece-size-computed, 48px) * 0.105), #ffff00 0%, #ffff00 calc(var(--piece-size-computed, 48px) * 0.06), transparent calc(var(--piece-size-computed, 48px) * 0.08), transparent 100%);
    }
}

/* Bench AI Glow - Wood theme (yellow) */
.theme-wood .bench-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%);
}

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

.theme-wood .curtain-left {
    background: linear-gradient(90deg, rgba(28, 15, 10, 1) 0%, rgba(61, 40, 23, 1) 100%);
}

.theme-wood .curtain-right {
    background: linear-gradient(-90deg, rgba(28, 15, 10, 1) 0%, rgba(61, 40, 23, 1) 100%);
}

.theme-wood .splash-logo {
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.5));
}

.theme-wood .splash-ring .ring-progress {
    stroke: #f59e0b;
    color: #f59e0b;
    /* for currentColor */
}

.theme-wood .splash-status {
    color: rgba(254, 243, 199, 0.6);
}

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

/* --- 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%); */
    background: radial-gradient(circle at 50% calc(var(--piece-size-computed, 48px) * 0.105), #000000 0%, #000000 calc(var(--piece-size-computed, 48px) * 0.06), transparent calc(var(--piece-size-computed, 48px) * 0.08), 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% 6%, #000000 0%, #000000 3px, transparent 4px, transparent 100%); */
        background: radial-gradient(circle at 50% calc(var(--piece-size-computed, 48px) * 0.105), #000000 0%, #000000 calc(var(--piece-size-computed, 48px) * 0.06), transparent calc(var(--piece-size-computed, 48px) * 0.08), transparent 100%);
    }
}

/* Bench AI Glow - Ink theme (black) */
.theme-ink .bench-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%);
}

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

.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));
}

.theme-ink .curtain-left {
    background: linear-gradient(90deg, #1a1a1a 0%, #2d2d2d 100%);
}

.theme-ink .curtain-right {
    background: linear-gradient(-90deg, #1a1a1a 0%, #2d2d2d 100%);
}