:root {
    --bg-primary: #312e2b;
    --bg-secondary: #272522;
    --bg-panel: #21201d;
    --bg-hover: #3d3a36;
    
    --text-primary: #fff;
    --text-secondary: #bababa;
    --text-muted: #989795;
    
    --accent-green: #81b64c;
    --accent-green-dark: #629924;
    --accent-purple: #7b61ff;
    
    --square-light: #eeeed2;
    --square-dark: #769656;
    --square-highlight: rgba(255, 255, 51, 0.5);
    --square-selected: rgba(255, 255, 51, 0.5);
    --square-legal: rgba(0, 0, 0, 0.1);
    --square-capture: rgba(255, 255, 51, 0.5);
    --square-check: rgba(255, 0, 0, 0.5);
    --square-last-move-light: #f6f669;
    --square-last-move-dark: #baca44;
    
    --border-color: #3d3a36;
    
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', monospace;
    
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    overflow: hidden;
}

body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.app-container {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    overflow: hidden;
}

/* Main Game Layout */
.game-layout {
    display: flex;
    gap: 16px;
    max-width: 1200px;
    height: 100%;
    max-height: calc(100vh - 84px);
}

/* Board Area */
.board-area {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Player Bars */
.player-bar {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 4px;
    gap: 12px;
    min-height: 48px;
}

.opponent-bar {
    margin-bottom: 4px;
    border-radius: 4px 4px 0 0;
}

.player-bar-bottom {
    margin-top: 4px;
    border-radius: 0 0 4px 4px;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.player-avatar svg {
    width: 20px;
    height: 20px;
}

.bot-avatar {
    color: var(--accent-green);
}

.human-avatar {
    color: #6bb3f8;
}

.player-details {
    display: flex;
    flex-direction: column;
}

.player-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-rating {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.captured-pieces {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 24px;
}

.captured-pieces .captured-piece {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -4px;
}

.captured-pieces .captured-piece.first-piece {
    margin-left: 0;
}

/* First piece of each type group - add spacing from previous group */
.captured-pieces .captured-piece.group-start {
    margin-left: 4px;
}

.captured-pieces .captured-piece.group-start.first-piece {
    margin-left: 0;
}

/* Stacked pieces of the same type overlap more */
.captured-pieces .captured-piece.stacked {
    margin-left: -12px;
}

/* Captured white pieces - bright white with dark outline */
.captured-pieces .captured-piece.white {
    filter: brightness(1.2) contrast(1.1) 
        drop-shadow(1px 0 0 rgba(0, 0, 0, 0.5))
        drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.5))
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5))
        drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.5));
}

/* Captured black pieces - dark grey with white outline */
.captured-pieces .captured-piece.black {
    filter: brightness(0.5) saturate(0) 
        drop-shadow(1px 0 0 rgba(255, 255, 255, 0.6))
        drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.6))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.6));
}

.captured-pieces .material-diff {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 6px;
    font-weight: 600;
}

.player-clock {
    display: flex;
    align-items: center;
    gap: 8px;
}

.turn-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 2px solid var(--text-muted);
    transition: all var(--transition-normal);
}

.turn-dot.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
}

/* Board Container */
.board-container {
    display: flex;
    align-items: stretch;
    overflow: visible;
}

.board-coordinates {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0 4px;
    user-select: none;
}

.board-coordinates.left {
    text-align: right;
}

.board-coordinates.right {
    text-align: left;
}

.board-coordinates.bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 4px 28px;
}

.board-coordinates span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(min(calc(100vh - 220px), 560px) / 8);
}

.board-coordinates.bottom span {
    width: calc(min(calc(100vh - 220px), 560px) / 8);
    height: auto;
}

/* Chess Board */
.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(calc(100vh - 220px), 560px);
    height: min(calc(100vh - 220px), 560px);
    border-radius: 3px;
    overflow: visible;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.square {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}

.square.light {
    background-color: var(--square-light);
}

.square.dark {
    background-color: var(--square-dark);
}

.square.selected.light {
    background-color: var(--square-last-move-light);
}

.square.selected.dark {
    background-color: var(--square-last-move-dark);
}

.square.last-move.light {
    background-color: var(--square-last-move-light);
}

.square.last-move.dark {
    background-color: var(--square-last-move-dark);
}

.square.legal-move::after {
    content: '';
    position: absolute;
    width: 32%;
    height: 32%;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 50%;
}

.square.capture-move::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    box-sizing: border-box;
}

/* Check flash animation - brief red ring that dissipates */
.square.check-flash::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, 
        transparent 40%,
        rgba(255, 0, 0, 0.8) 50%,
        rgba(255, 0, 0, 0.6) 60%,
        transparent 70%);
    animation: check-flash 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 5;
}

@keyframes check-flash {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Checkmate - king in red with animated banner */
.square.checkmate {
    position: relative;
    animation: checkmate-bg-animate 0.5s ease-out forwards;
}

@keyframes checkmate-bg-animate {
    0% {
        background-color: inherit;
    }
    100% {
        background-color: #c33;
    }
}

.square.checkmate.light {
    animation: checkmate-bg-animate-light 0.5s ease-out forwards;
}

.square.checkmate.dark {
    animation: checkmate-bg-animate-dark 0.5s ease-out forwards;
}

@keyframes checkmate-bg-animate-light {
    0% {
        background-color: var(--square-light);
    }
    100% {
        background-color: #c33;
    }
}

@keyframes checkmate-bg-animate-dark {
    0% {
        background-color: var(--square-dark);
    }
    100% {
        background-color: #c33;
    }
}

.square.checkmate .piece {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* Checkmate banner - fallen king icon with animation */
.checkmate-banner {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #4a3030;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: badge-pop-in 0.4s ease-out 0.2s both;
}

@keyframes badge-pop-in {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    60% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.checkmate-banner::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 45'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.5 11.63V6M20 8h5' stroke-linejoin='miter'/%3E%3Cpath d='M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5' fill='%23000' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3Cpath d='M11.5 37c5.5 3.5 15.5 3.5 21 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-3.5-7.5-13-10.5-16-4-3 6 5 10 5 10V37z' fill='%23000'/%3E%3Cpath d='M11.5 30c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0m-21 3.5c5.5-3 15.5-3 21 0'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(72deg);
    filter: invert(1) opacity(0.9);
}

/* Winner square - green background for winning king with animation */
.square.winner-square {
    position: relative;
    animation: winner-bg-animate 0.5s ease-out forwards;
}

.square.winner-square.light {
    animation: winner-bg-animate-light 0.5s ease-out forwards;
}

.square.winner-square.dark {
    animation: winner-bg-animate-dark 0.5s ease-out forwards;
}

@keyframes winner-bg-animate-light {
    0% {
        background-color: var(--square-light);
    }
    100% {
        background-color: #4a4;
    }
}

@keyframes winner-bg-animate-dark {
    0% {
        background-color: var(--square-dark);
    }
    100% {
        background-color: #4a4;
    }
}

.square.winner-square .piece {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
}

/* Winner badge - crown icon with animation */
.winner-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #5a9a5a;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: badge-pop-in 0.4s ease-out 0.2s both;
}

.winner-badge::before {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Draw square - grey background for both kings with animation */
.square.draw-square {
    position: relative;
}

.square.draw-square.light {
    animation: draw-bg-animate-light 0.5s ease-out forwards;
}

.square.draw-square.dark {
    animation: draw-bg-animate-dark 0.5s ease-out forwards;
}

@keyframes draw-bg-animate-light {
    0% {
        background-color: var(--square-light);
    }
    100% {
        background-color: #888;
    }
}

@keyframes draw-bg-animate-dark {
    0% {
        background-color: var(--square-dark);
    }
    100% {
        background-color: #666;
    }
}

.square.draw-square .piece {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)) grayscale(30%);
}

/* Draw badge - 1/2 icon with animation */
.draw-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #555;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    animation: badge-pop-in 0.4s ease-out 0.2s both;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-main);
}

/* Chess Pieces - Using CSS background images */
.piece {
    width: 90%;
    height: 90%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: auto;
    transition: transform var(--transition-fast);
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.3));
    user-select: none;
    -webkit-user-drag: none;
}

.square:hover .piece {
    transform: scale(1.05);
}

/* Piece images - using Lichess cburnett set (open source) */
.piece.white.king { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wK.svg'); }
.piece.white.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg'); }
.piece.white.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg'); }
.piece.white.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg'); }
.piece.white.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg'); }
.piece.white.pawn { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wP.svg'); }

.piece.black.king { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bK.svg'); }
.piece.black.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bQ.svg'); }
.piece.black.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bR.svg'); }
.piece.black.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bB.svg'); }
.piece.black.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bN.svg'); }
.piece.black.pawn { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bP.svg'); }

/* Drag and Drop */
.piece.dragging {
    opacity: 0.4;
}

.ghost-piece {
    position: fixed;
    width: 70px;
    height: 70px;
    pointer-events: none;
    z-index: 10000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
    transform: scale(1.1);
    cursor: grabbing;
}

.square.drag-hover {
    background-color: rgba(100, 200, 100, 0.5) !important;
}

.square.drag-hover.light {
    background-color: #acd67a !important;
}

.square.drag-hover.dark {
    background-color: #88b152 !important;
}

/* Piece cursor */
.piece[style*="cursor: grab"] {
    pointer-events: auto;
}

/* Side Panel */
.side-panel {
    width: 320px;
    background: var(--bg-panel);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
}

/* New Game Header */
.new-game-header {
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.new-game-btn-large {
    width: 100%;
    padding: 14px 24px;
    background: var(--accent-green);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.new-game-btn-large:hover {
    background: var(--accent-green-dark);
    transform: translateY(-1px);
}

.game-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Color selector option group - inline layout */
.option-group:has(.color-selector) {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.option-group label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.color-selector {
    display: flex;
    gap: 4px;
}

.color-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.color-btn:hover {
    border-color: var(--text-muted);
}

.color-btn.active {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 1px var(--accent-green);
}

/* White button - cream/light background */
.color-btn.white-btn {
    background: #eeeed2;
}

.color-btn.white-btn:hover {
    background: #f5f5dc;
}

/* Black button - dark background */
.color-btn.black-btn {
    background: #4a4a4a;
}

.color-btn.black-btn:hover {
    background: #5a5a5a;
}

/* Random button - split half and half */
.color-btn.random-btn {
    background: linear-gradient(135deg, #eeeed2 50%, #4a4a4a 50%);
}

.color-btn.random-btn:hover {
    background: linear-gradient(135deg, #f5f5dc 50%, #5a5a5a 50%);
}

/* Piece images inside buttons */
.color-piece {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.color-piece.white-king {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wK.svg');
}

.color-piece.black-king {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bK.svg');
}

/* Random question mark - dark with white outline */
.random-question {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-main);
    color: #333;
    text-shadow: 
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0 -1px 0 #fff,
        0 1px 0 #fff,
        -1px 0 0 #fff,
        1px 0 0 #fff;
    line-height: 1;
}

.option-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.option-group select:hover,
.option-group select:focus {
    border-color: var(--accent-green);
    outline: none;
}

.option-group select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-panel);
}

.option-group select:disabled:hover {
    border-color: var(--border-color);
}

/* Moves Section */
.moves-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.moves-header {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.moves-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.opening-name {
    font-size: 12px;
    color: var(--text-muted);
}

/* Moves Panel */
.moves-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.moves-list {
    padding: 8px 0;
}

.move-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--border-color);
}

.move-row:last-child {
    border-bottom: none;
}

.move-number {
    width: 40px;
    padding: 8px 12px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: right;
    background: var(--bg-secondary);
}

.move {
    flex: 1;
    padding: 8px 16px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.move:hover {
    background: var(--bg-hover);
}

.move.current {
    background: var(--accent-green);
    color: #fff;
}

.move.current.previewing {
    background: var(--accent-purple);
    color: #fff;
}

.move.white-move {
    border-right: 1px solid var(--border-color);
}

.move-time {
    font-size: 11px;
    color: var(--text-muted);
}

.move.current .move-time {
    color: rgba(255, 255, 255, 0.7);
}

/* Game Controls */
.game-controls {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.control-btn {
    width: 44px;
    height: 40px;
    background: var(--bg-hover);
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background: #4a4642;
}

.control-btn:active {
    transform: scale(0.95);
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
}

.action-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-hover);
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover {
    background: #4a4642;
}

/* New Game Section */
.new-game-section {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bot-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bot-selector label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.bot-selector select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.bot-selector select:hover,
.bot-selector select:focus {
    border-color: var(--accent-green);
    outline: none;
}

.new-game-btn {
    width: 100%;
    padding: 12px 24px;
    background: var(--accent-green);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.new-game-btn:hover {
    background: var(--accent-green-dark);
}

/* Game Status */
.game-status {
    padding: 12px 16px;
    background: var(--bg-secondary);
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.status-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.status-text.check {
    color: #ff6b6b;
}

.status-text.checkmate,
.status-text.stalemate {
    color: var(--accent-green);
}

.status-text.preview {
    color: var(--accent-purple);
}

/* Modals - positioned over board area */
.promotion-modal,
.game-over-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
}

.promotion-modal.active,
.game-over-modal.active {
    display: flex;
}

/* Transparent overlay that only blocks board interaction */
.board-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: auto;
    background: transparent;
}

.game-over-content {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 32px 48px;
    text-align: center;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    min-width: 280px;
    position: relative;
    border: 1px solid var(--border-color);
    pointer-events: auto;
    z-index: 1;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Game over icon (crown for win, 1/2 for draw) */
.game-over-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    animation: icon-bounce-in 0.5s ease-out both;
}

@keyframes icon-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    50% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.game-over-icon.win {
    background: linear-gradient(135deg, #4a4, #3a8a3a);
    box-shadow: 0 4px 16px rgba(74, 170, 74, 0.4);
}

.game-over-icon.win::before {
    content: '';
    width: 36px;
    height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 16L3 5L8.5 10L12 4L15.5 10L21 5L19 16H5M19 19C19 19.6 18.6 20 18 20H6C5.4 20 5 19.6 5 19V18H19V19Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.game-over-icon.draw {
    background: linear-gradient(135deg, #888, #666);
    box-shadow: 0 4px 16px rgba(100, 100, 100, 0.4);
}

.game-over-icon.draw::before {
    content: '½';
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-main);
}

.game-over-result {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.game-over-reason {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 28px 0;
}

.game-over-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rematch-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--bg-hover);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rematch-btn:hover {
    background: var(--accent-green);
    color: #fff;
}

.promotion-content {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    z-index: 1;
    border: 1px solid var(--border-color);
}

.promotion-content h3 {
    margin-bottom: 20px;
    color: var(--text-primary);
    font-size: 18px;
}

.promotion-pieces {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.promotion-piece {
    width: 64px;
    height: 64px;
    background: var(--bg-hover);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.promotion-piece:hover {
    border-color: var(--accent-green);
    transform: scale(1.1);
}

.promotion-piece.white.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg'); background-color: var(--bg-hover); }
.promotion-piece.white.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg'); background-color: var(--bg-hover); }
.promotion-piece.white.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg'); background-color: var(--bg-hover); }
.promotion-piece.white.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg'); background-color: var(--bg-hover); }

.promotion-piece.black.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bQ.svg'); background-color: var(--bg-hover); }
.promotion-piece.black.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bR.svg'); background-color: var(--bg-hover); }
.promotion-piece.black.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bB.svg'); background-color: var(--bg-hover); }
.promotion-piece.black.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bN.svg'); background-color: var(--bg-hover); }

.modal-content p {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

/* Scrollbar */
.moves-list::-webkit-scrollbar {
    width: 8px;
}

.moves-list::-webkit-scrollbar-track {
    background: var(--bg-panel);
}

.moves-list::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

.moves-list::-webkit-scrollbar-thumb:hover {
    background: #4a4642;
}

/* Responsive */
@media (max-width: 1000px) {
    .game-layout {
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
    }
    
    .side-panel {
        width: 100%;
        max-width: 560px;
        height: auto;
        max-height: none;
    }
    
    .chess-board {
        width: min(80vw, 400px);
        height: min(80vw, 400px);
    }
    
    .board-coordinates span {
        height: calc(min(80vw, 400px) / 8);
    }
    
    .board-coordinates.bottom span {
        width: calc(min(80vw, 400px) / 8);
    }
    
    html, body {
        overflow: auto;
    }
    
    .app-container {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: auto;
    }
}

/* ===========================================
   App Header
   =========================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(39, 37, 34, 0.98) 100%);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 28px;
    height: 28px;
    color: var(--accent-green);
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.nav-item.active {
    background: rgba(129, 182, 76, 0.15);
    color: var(--accent-green);
}

.nav-item.active .nav-icon {
    color: var(--accent-green);
}

.nav-icon {
    width: 18px;
    height: 18px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 180px;
}

/* Help Button */
.help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-normal);
    margin-left: auto;
}

.help-btn:hover {
    background: rgba(123, 97, 255, 0.15);
    border-color: rgba(123, 97, 255, 0.3);
    color: #7b61ff;
}

.help-btn .help-icon {
    width: 18px;
    height: 18px;
}

.tab-content {
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tab-content.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

#eval-builder-tab.active {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

#leaderboard-tab.active {
    align-items: stretch;
}

/* ===========================================
   Eval Builder Layout - New Design
   =========================================== */

/* Eval Header Bar */
.eval-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
}

.eval-name-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.eval-icon {
    width: 20px;
    height: 20px;
    color: var(--accent-green);
}

.eval-header-bar .eval-name-input {
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 600;
    min-width: 280px;
}

.eval-header-bar .eval-name-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.eval-meta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.eval-author-group,
.eval-description-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eval-icon.small {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.eval-author-input {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    width: 140px;
}

.eval-author-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.eval-description-input {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    width: 260px;
}

.eval-description-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.eval-actions {
    display: flex;
    gap: 8px;
}

.eval-actions .action-btn span {
    display: inline;
}

/* Main Two-Column Layout */
.eval-builder-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    width: 100%;
    height: calc(100vh - 120px);
    overflow: hidden;
    box-sizing: border-box;
}

/* Block Sidebar (Left) */
.block-sidebar {
    background: var(--bg-panel);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 16px;
}

.sidebar-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-section {
    margin-bottom: 20px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title .section-icon {
    width: 14px;
    height: 14px;
}

.block-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Sidebar block items - compact */
.block-list .block-item {
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.block-list .block-item:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
    transform: translateX(2px);
}

.block-list .block-item .block-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.block-list .block-item .block-desc {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOAD EVALUATOR MODAL WITH PRESETS
   ═══════════════════════════════════════════════════════════════════════════ */

.eval-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.eval-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eval-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.eval-modal-content {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.eval-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.eval-modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.eval-modal-header h2 i {
    width: 20px;
    height: 20px;
    color: var(--accent-green);
}

.eval-modal-close {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.eval-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.eval-modal-close i {
    width: 18px;
    height: 18px;
}

.load-modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.load-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.load-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.load-section-header i {
    width: 16px;
    height: 16px;
    color: var(--accent-purple);
}

.load-section-description {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Presets Grid in Modal */
.presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.preset-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-card:hover {
    border-color: var(--accent-purple);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.preset-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-purple) 0%, #9b7bff 100%);
    border-radius: 8px;
    flex-shrink: 0;
}

.preset-card-icon i {
    width: 18px;
    height: 18px;
    color: white;
}

.preset-card-empty .preset-card-icon {
    background: linear-gradient(135deg, var(--accent-green) 0%, #a3d165 100%);
}

.preset-card-content {
    min-width: 0;
    flex: 1;
}

.preset-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.preset-card-author {
    font-size: 11px;
    color: var(--accent-purple);
    margin-bottom: 6px;
}

.preset-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preset-card-empty .preset-card-author {
    color: var(--accent-green);
}

/* Saved Evaluators List */
.saved-evals-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.no-saved-evals {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

.saved-eval-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.saved-eval-item:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
}

.saved-eval-info {
    min-width: 0;
    flex: 1;
}

.saved-eval-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-eval-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.saved-eval-actions {
    display: flex;
    gap: 6px;
}

.saved-eval-actions button {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 6px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.saved-eval-actions button:hover {
    background: var(--bg-panel);
    color: var(--text-primary);
}

.saved-eval-actions button i {
    width: 14px;
    height: 14px;
}

.saved-eval-load:hover {
    border-color: var(--accent-green) !important;
    color: var(--accent-green) !important;
}

.saved-eval-delete:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

/* Main Builder Area */
.main-builder-area {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--bg-primary);
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.clear-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-main);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.clear-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.clear-btn .btn-icon {
    width: 12px;
    height: 12px;
}

/* Rule Builder Section */
.rule-builder-section {
    background: var(--bg-panel);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}

/* Horizontal Rule Cards Row */
.rule-cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0;
}

/* Individual Rule Card */
.rule-card {
    width: 180px;
    height: 110px;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.rule-card:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Card type colors */
.rule-card[data-type="condition"] {
    border-color: rgba(245, 158, 11, 0.4);
}

.rule-card[data-type="condition"]:hover {
    border-color: #f59e0b;
}

.rule-card[data-type="target"] {
    border-color: rgba(59, 130, 246, 0.4);
}

.rule-card[data-type="target"]:hover {
    border-color: #3b82f6;
}

.rule-card[data-type="value"] {
    border-color: rgba(16, 185, 129, 0.4);
}

.rule-card[data-type="value"]:hover {
    border-color: #10b981;
}

/* Empty Card State */
.card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 16px;
    text-align: center;
}

.card-empty .card-icon {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    margin-bottom: 8px;
    opacity: 0.6;
}

.rule-card[data-type="condition"] .card-empty .card-icon {
    color: #f59e0b;
}

.rule-card[data-type="target"] .card-empty .card-icon {
    color: #3b82f6;
}

.rule-card[data-type="value"] .card-empty .card-icon {
    color: #10b981;
}

.card-empty .card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.card-empty .card-hint {
    font-size: 10px;
    color: var(--text-muted);
}

/* Filled Card State */
.card-filled {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
}

.rule-card.filled {
    border-style: solid;
}

.rule-card[data-type="condition"].filled {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.rule-card[data-type="target"].filled {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.rule-card[data-type="value"].filled {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.card-filled .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-filled .card-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.rule-card[data-type="condition"] .card-filled .card-icon {
    color: #f59e0b;
}

.rule-card[data-type="target"] .card-filled .card-icon {
    color: #3b82f6;
}

.rule-card[data-type="value"] .card-filled .card-icon {
    color: #10b981;
}

.card-filled .card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-filled .card-description {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
}

.card-edit-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-primary);
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.rule-card:hover .card-edit-btn {
    opacity: 1;
}

.card-edit-btn:hover {
    background: var(--accent-green);
}

.card-edit-btn svg {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
}

.card-edit-btn:hover svg {
    color: #fff;
}

/* Card Connectors (Arrows) */
.card-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    gap: 4px;
}

.connector-arrow {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.connector-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rule Finalize Row */
.rule-finalize-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

.rule-name-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rule-name-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.rule-name-field .label-icon {
    width: 14px;
    height: 14px;
}

.rule-name-field .rule-name-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
}

.rule-name-field .rule-name-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.add-rule-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--accent-green);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.add-rule-btn:hover {
    background: #6a9a3d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(129, 182, 76, 0.3);
}

.add-rule-btn .btn-icon {
    width: 16px;
    height: 16px;
}

/* Rules List Section */
.rules-list-section {
    background: var(--bg-panel);
    border-radius: 10px;
    padding: 20px;
    flex: 1;
    min-height: 200px;
}

.rules-list-section .rules-count {
    font-weight: 400;
    color: var(--text-muted);
}

.rules-list-section .empty-rules {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
}

.rules-list-section .empty-rules .empty-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.rules-list-section .empty-rules p {
    margin: 0;
    font-size: 13px;
}

/* Block Catalog (Left Panel) */
.block-catalog {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 12px;
    overflow-y: auto;
    max-height: 100%;
    scroll-behavior: smooth;
}

.catalog-header {
    margin-bottom: 12px;
}

.catalog-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.catalog-header p {
    font-size: 11px;
    color: var(--text-muted);
}

.catalog-section {
    margin-bottom: 16px;
}

.catalog-section h3 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.btn-icon {
    width: 14px;
    height: 14px;
}

.connector-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

.block-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Sidebar block items - wrapper for block tiles */
.block-item {
    display: flex;
    flex-direction: column;
    cursor: grab;
    transition: all var(--transition-fast);
    width: 100%;
}

.block-item:hover {
    transform: translateX(2px);
}

.block-item:hover .block-tile {
    border-color: var(--accent-green);
    background: var(--bg-hover);
}

.block-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* Block type indicator colors on sidebar items */
.block-item.block-condition .block-tile {
    border-left: 3px solid #f59e0b;
}

.block-item.block-condition .block-tile-icon {
    color: #f59e0b;
}

.block-item.block-target .block-tile {
    border-left: 3px solid #3b82f6;
}

.block-item.block-target .block-tile-icon {
    color: #3b82f6;
}

.block-item.block-value .block-tile {
    border-left: 3px solid #10b981;
}

.block-item.block-value .block-tile-icon {
    color: #10b981;
}

/* ==============================================
   UNIFIED BLOCK TILE SYSTEM
   Single source of truth for sidebar, slots, and rules
   ============================================== */

/* Base tile structure */
.block-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    position: relative;
    width: 100%;
    transition: all var(--transition-fast);
}

/* Tile header */
.block-tile-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-tile-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-tile-icon svg {
    width: 16px;
    height: 16px;
}

.block-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

/* Tile body */
.block-tile-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.block-tile-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.block-tile-summary {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* Active mode sentence */
.block-tile-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.block-tile-sentence .sentence-text {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Remove button */
.block-tile-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-primary);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.block-tile-remove:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.block-tile-remove svg {
    width: 14px;
    height: 14px;
}

/* ==============================================
   TILE MODE VARIATIONS
   ============================================== */

/* Preview mode (sidebar) */
.block-tile-preview {
    padding: 8px 10px;
    cursor: grab;
}

.block-tile-preview:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
    transform: translateX(2px);
}

.block-tile-preview .block-tile-name {
    font-size: 12px;
}

.block-tile-preview .block-tile-desc {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Active mode (slots) */
.block-tile-active {
    padding: 12px 14px;
    padding-right: 40px; /* Space for remove button */
    background: var(--bg-hover);
}

/* Compact mode (rules list) */
.block-tile-compact {
    padding: 6px 8px;
    gap: 2px;
}

.block-tile-compact .block-tile-header {
    gap: 6px;
}

.block-tile-compact .block-tile-icon {
    width: 14px;
    height: 14px;
}

.block-tile-compact .block-tile-icon svg {
    width: 12px;
    height: 12px;
}

.block-tile-compact .block-tile-name {
    font-size: 11px;
}

/* ==============================================
   TILE TYPE COLORS
   ============================================== */

.block-tile-condition {
    border-left: 3px solid #f59e0b;
}

.block-tile-condition .block-tile-icon {
    color: #f59e0b;
}

.block-tile-target {
    border-left: 3px solid #3b82f6;
}

.block-tile-target .block-tile-icon {
    color: #3b82f6;
}

.block-tile-value {
    border-left: 3px solid #10b981;
}

.block-tile-value .block-tile-icon {
    color: #10b981;
}

/* ==============================================
   PIECE-SQUARE TABLE COMPONENTS
   ============================================== */

/* Mini preview grid for sidebar */
.pst-preview {
    display: inline-grid;
    grid-template-columns: repeat(8, 7px);
    grid-template-rows: repeat(8, 7px);
    gap: 1px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: visible;
    margin: 8px auto;
}

.pst-cell {
    background: var(--bg-primary);
    width: 100%;
    height: 100%;
}

.pst-cell.pst-hot {
    background: rgba(34, 197, 94, 0.6);
}

.pst-cell.pst-warm {
    background: rgba(34, 197, 94, 0.3);
}

.pst-cell.pst-cool {
    background: rgba(239, 68, 68, 0.3);
}

.pst-cell.pst-cold {
    background: rgba(239, 68, 68, 0.6);
}

/* Full PST editor for active slot */
.pst-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    background: var(--bg-primary);
    border-radius: 6px;
}

.pst-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pst-control-row label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
}

.pst-piece-select,
.pst-preset-select {
    flex: 1;
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

/* PST Grid */
.pst-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.pst-file-labels {
    display: flex;
    padding-left: 20px;
}

.pst-file-labels span {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    padding: 2px 0;
}

.pst-row {
    display: flex;
    align-items: center;
}

.pst-rank-label {
    width: 20px;
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
}

.pst-grid-cell {
    flex: 1;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    min-width: 24px;
    min-height: 24px;
    cursor: default;
    transition: transform 0.1s;
}

.pst-grid-cell:hover {
    transform: scale(1.1);
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Editable PST cells */
.pst-cell-editable {
    cursor: pointer !important;
}

.pst-cell-editable:hover {
    outline: 2px solid var(--accent-color);
    outline-offset: -1px;
}

.pst-cell-input {
    width: 100%;
    height: 100%;
    border: none;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-align: center;
    font-size: 8px;
    font-family: var(--font-mono);
    padding: 0;
    margin: 0;
    outline: 2px solid var(--accent-color);
}

.pst-cell-input::-webkit-inner-spin-button,
.pst-cell-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom badge indicator */
.pst-custom-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    color: var(--warning-color, #f59e0b);
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Preset row with badge */
.pst-preset-row {
    flex-wrap: wrap;
}

/* Preset description */
.pst-description {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 6px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--accent-color);
}

/* PST explanation panel */
.pst-explain {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 4px;
    margin-top: 4px;
}

.pst-explain strong {
    color: var(--text-primary);
}

.pst-explain em {
    color: var(--accent-color);
    font-style: normal;
    font-weight: 500;
}

/* Reset button row */
.pst-reset-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.pst-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 10px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.pst-reset-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

/* PST Header row with help button */
.pst-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pst-header-row .pst-control-row {
    flex: 1;
}

.pst-help-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pst-help-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(99, 102, 241, 0.1);
}

.pst-help-btn svg {
    width: 14px;
    height: 14px;
}

/* Help panel */
.pst-help-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pst-help-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pst-help-header strong {
    color: var(--text-primary);
    font-size: 12px;
}

.pst-help-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.pst-help-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.pst-help-close svg {
    width: 14px;
    height: 14px;
}

.pst-help-panel p {
    margin: 0 0 8px 0;
}

.pst-help-panel em {
    color: var(--accent-color);
    font-style: normal;
}

.pst-help-panel hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}

.pst-help-presets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pst-help-presets > strong {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pst-help-preset-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.pst-help-preset-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 10px;
}

.pst-help-preset-desc {
    font-size: 10px;
    color: var(--text-muted);
}

/* ==============================================
   TARGET PREVIEW VISUAL HINTS
   Mini visualizations for each eval target type
   ============================================== */

/* Base target preview container */
.target-preview {
    margin: 6px 0;
    display: flex;
    justify-content: center;
}

/* Mini board grid for visual previews */
.target-preview-board {
    display: grid;
    grid-template-columns: repeat(var(--cols, 4), 14px);
    grid-template-rows: repeat(var(--rows, 4), 14px);
    gap: 0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Individual mini board cell */
.mini-cell {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Neutral, muted board colors */
.mini-cell.light {
    background: #d4d4d4;
}

.mini-cell.dark {
    background: #a3a3a3;
}

/* Mini piece inside cell - uses CSS background images */
.target-preview-board .mini-piece {
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Mini piece SVG backgrounds - white pieces */
.target-preview-board .mini-piece.white.k { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wK.svg'); }
.target-preview-board .mini-piece.white.q { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg'); }
.target-preview-board .mini-piece.white.r { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg'); }
.target-preview-board .mini-piece.white.b { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg'); }
.target-preview-board .mini-piece.white.n { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg'); }
.target-preview-board .mini-piece.white.p { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wP.svg'); }

/* Mini piece SVG backgrounds - black pieces */
.target-preview-board .mini-piece.black.k { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bK.svg'); }
.target-preview-board .mini-piece.black.q { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bQ.svg'); }
.target-preview-board .mini-piece.black.r { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bR.svg'); }
.target-preview-board .mini-piece.black.b { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bB.svg'); }
.target-preview-board .mini-piece.black.n { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bN.svg'); }
.target-preview-board .mini-piece.black.p { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bP.svg'); }

/* Highlight classes for different purposes - subtle overlays */
.mini-cell.highlight-good {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.25)) !important;
}

.mini-cell.highlight-move {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(59, 130, 246, 0.2)) !important;
}

.mini-cell.highlight-piece {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.25)) !important;
}

.mini-cell.highlight-defender {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15)) !important;
}

.mini-cell.highlight-center {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.45), rgba(251, 191, 36, 0.3)) !important;
}

.mini-cell.highlight-space {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1)) !important;
}

.mini-cell.highlight-path {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1)) !important;
}

.mini-cell.highlight-promote {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(34, 197, 94, 0.35)) !important;
}

.mini-cell.highlight-low {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05)) !important;
}

.mini-cell.highlight-mid-low {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.15)) !important;
}

.mini-cell.highlight-mid {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.2)) !important;
}

.mini-cell.highlight-high {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.45), rgba(34, 197, 94, 0.3)) !important;
}

.mini-cell.highlight-base {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.2)) !important;
}

.mini-cell.highlight-member {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(251, 191, 36, 0.25)) !important;
}

.mini-cell.highlight-head {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.45), rgba(34, 197, 94, 0.3)) !important;
}

.mini-cell.highlight-outpost {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.45), rgba(34, 197, 94, 0.3)) !important;
}

.mini-cell.highlight-blocked {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1)) !important;
}

.mini-cell.highlight-blocked::after {
    content: '×';
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: rgba(239, 68, 68, 0.7);
}

.mini-cell.highlight-weak {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.2)) !important;
}

.mini-cell.highlight-king {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(139, 92, 246, 0.15)) !important;
}

.mini-cell.highlight-shield {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.15)) !important;
}

.mini-cell.highlight-target {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(239, 68, 68, 0.25)) !important;
}

.mini-cell.highlight-attacker {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.25)) !important;
}

.mini-cell.highlight-battery {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.25)) !important;
}

.mini-cell.highlight-line {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1)) !important;
}

.mini-cell.highlight-developed {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.25)) !important;
}

.mini-cell.highlight-undeveloped {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05)) !important;
}

.mini-cell.highlight-distance {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(251, 191, 36, 0.15)) !important;
}

.mini-cell.highlight-checked {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.35)) !important;
}

.mini-cell.highlight-check-line {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(239, 68, 68, 0.1)) !important;
}

.mini-cell.highlight-open {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
}

/* ==============================================
   MINIMAL PREVIEW GRID - Universal clean grid style
   ============================================== */

/* Base grid container - use data attributes for dynamic sizing */
.preview-grid {
    display: inline-grid;
    gap: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    margin: 8px auto;
}

/* Grid sizing variations */
.preview-grid[data-cols="1"] { grid-template-columns: repeat(1, 14px); }
.preview-grid[data-cols="3"] { grid-template-columns: repeat(3, 14px); }
.preview-grid[data-cols="4"] { grid-template-columns: repeat(4, 14px); }
.preview-grid[data-cols="5"] { grid-template-columns: repeat(5, 14px); }
.preview-grid[data-cols="6"] { grid-template-columns: repeat(6, 14px); }
.preview-grid[data-rows="1"] { grid-template-rows: repeat(1, 14px); }
.preview-grid[data-rows="3"] { grid-template-rows: repeat(3, 14px); }
.preview-grid[data-rows="4"] { grid-template-rows: repeat(4, 14px); }
.preview-grid[data-rows="5"] { grid-template-rows: repeat(5, 14px); }
.preview-grid[data-rows="6"] { grid-template-rows: repeat(6, 14px); }
.preview-grid[data-rows="8"] { grid-template-rows: repeat(8, 14px); }

/* Grid cell base style */
.preview-cell {
    width: 14px;
    height: 14px;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* Highlighted cells */
.preview-cell.highlight {
    background: rgba(255, 255, 255, 0.4) !important;
    background-clip: padding-box;
}

/* Alternative highlight colors */
.preview-cell.highlight-alt {
    background: rgba(255, 255, 255, 0.25) !important;
    background-clip: padding-box;
}

.preview-cell.highlight-strong {
    background: rgba(255, 255, 255, 0.55) !important;
    background-clip: padding-box;
}

/* Battery diagonal highlight */
.preview-cell-highlight {
    background: rgba(255, 255, 255, 0.4) !important;
    background-clip: padding-box;
}

/* Capture square - stronger highlight for pieces that can be captured */
.preview-cell-capture {
    background: rgba(255, 255, 255, 0.65) !important;
    background-clip: padding-box;
}

/* Red highlights for check preview */
.preview-cell-danger {
    background: rgba(239, 68, 68, 0.4) !important;
    background-clip: padding-box;
}

.preview-cell-checked {
    background: rgba(239, 68, 68, 0.6) !important;
    background-clip: padding-box;
}

/* Piece Count preview - horizontal row */
.piece-count-preview {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    flex-wrap: wrap;
}

.piece-count-preview .preview-text {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.piece-count-preview .preview-piece-row {
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 2px 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.piece-count-preview .preview-piece-icon {
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.preview-piece-icon.piece-pawn {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wp.png');
}
.preview-piece-icon.piece-knight {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wn.png');
}
.preview-piece-icon.piece-bishop {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wb.png');
}
.preview-piece-icon.piece-rook {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wr.png');
}
.preview-piece-icon.piece-queen {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wq.png');
}

.piece-count-preview .preview-piece {
    width: 14px;
    height: 14px;
}

/* Proximity preview - concentric circles */
.proximity-preview {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.proximity-circle {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.proximity-king {
    position: relative;
    z-index: 10;
    width: 16px;
    height: 16px;
}

/* Piece silhouettes - white versions */
.preview-piece {
    width: 11px;
    height: 11px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
}

.preview-piece.piece-pawn {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wP.svg');
}
.preview-piece.piece-knight {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg');
}
.preview-piece.piece-bishop {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg');
}
.preview-piece.piece-rook {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg');
}
.preview-piece.piece-queen {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg');
}
.preview-piece.piece-king {
    background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wK.svg');
}

/* Black pieces (dimmer) */
.preview-piece.piece-black {
    opacity: 0.5;
}

/* Global preview - simple badge */
.global-preview-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 500;
    margin: 8px auto;
}

/* Material preview row */
.material-preview-row {
    display: inline-flex;
    gap: 2px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    margin: 8px auto;
}

.material-preview-row .preview-piece {
    width: 12px;
    height: 12px;
    opacity: 0.4;
}

.material-preview-row .preview-piece.highlight {
    opacity: 1;
}

/* Bishop pair preview */
.bishop-pair-preview {
    display: inline-flex;
    gap: 4px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    margin: 8px auto;
}

.bishop-pair-preview .preview-piece {
    width: 14px;
    height: 14px;
}

.bishop-pair-preview .square-indicator {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    margin-top: 2px;
}

.bishop-pair-preview .square-indicator.light {
    background: rgba(255, 255, 255, 0.5);
}

.bishop-pair-preview .square-indicator.dark {
    background: rgba(255, 255, 255, 0.25);
}

/* ==============================================
   DEFENSE PREVIEW - Knight with defending arrows
   ============================================== */
.defense-preview {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto;
}

.defense-preview .preview-grid {
    margin: 0;
}

.defense-arrows-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.defense-arrow-line {
    stroke: white;
    stroke-width: 2;
    fill: none;
}

/* ==============================================
   PROXIMITY PREVIEW - Concentric circles
   ============================================== */
.proximity-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto;
}

.proximity-circles {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proximity-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.proximity-circle-3 {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
}

.proximity-circle-2 {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
}

.proximity-circle-1 {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.35);
}

.proximity-king {
    position: relative;
    z-index: 1;
    width: 14px;
    height: 14px;
}

/* ==============================================
   BATTERY PREVIEW - Q+B targeting castled king
   ============================================== */
.battery-preview {
    display: inline-block;
    margin: 8px auto;
}

.battery-preview .preview-grid {
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Hollow pieces (opponent) - just outline */
.preview-piece.piece-hollow {
    filter: brightness(0) invert(1);
    opacity: 0.4;
}

/* PST preview centering handled in main .pst-preview rule */

/* Material preview - piece icon row */
.material-preview {
    display: flex;
    gap: 2px;
    padding: 4px 6px;
    background: var(--bg-primary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.material-item {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: all 0.15s;
}

.material-item .mini-piece {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.material-item.highlighted {
    opacity: 1;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 2px;
}

/* Material preview piece images */
.material-preview .mini-piece.white.p { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wP.svg'); }
.material-preview .mini-piece.white.n { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg'); }
.material-preview .mini-piece.white.b { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg'); }
.material-preview .mini-piece.white.r { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg'); }
.material-preview .mini-piece.white.q { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg'); }

/* Global/position bonus preview */
.global-preview {
    padding: 4px 10px;
}

.bonus-badge {
    display: inline-block;
    padding: 3px 10px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-green);
    font-family: var(--font-mono);
}

/* ==============================================
   BLOCK PICKER MODAL
   ============================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.modal-close svg {
    width: 18px;
    height: 18px;
}

.modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Block Picker Grid */
.block-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.block-picker-item {
    cursor: pointer;
    transition: all var(--transition-fast);
}

.block-picker-item:hover {
    transform: translateY(-2px);
}

.block-picker-item:hover .block-tile {
    border-color: var(--accent-green);
    background: var(--bg-hover);
}

/* Modal type colors */
.block-picker-content.picker-condition .modal-header {
    border-bottom-color: #f59e0b;
}

.block-picker-content.picker-target .modal-header {
    border-bottom-color: #3b82f6;
}

.block-picker-content.picker-value .modal-header {
    border-bottom-color: #10b981;
}

/* ==============================================
   DRAG AND DROP FEEDBACK
   ============================================== */

/* Dragging state for sidebar items */
.block-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.block-item.dragging .block-tile {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px rgba(129, 182, 76, 0.3);
}

/* Valid drop zone highlight */
.drop-slot.drag-over {
    border-style: solid;
    border-color: var(--accent-green) !important;
    background: rgba(129, 182, 76, 0.15);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(129, 182, 76, 0.2);
}

.drop-slot.drag-over::before {
    content: none !important;
}

/* Pulse animation for valid drop zones when dragging */
@keyframes dropPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(129, 182, 76, 0.2); }
    50% { box-shadow: 0 0 25px rgba(129, 182, 76, 0.4); }
}

.drop-slot.drag-over {
    animation: dropPulse 1s ease-in-out infinite;
}

/* Wrong type drop - subtle red tint */
.drop-slot.drag-invalid {
    border-color: rgba(239, 68, 68, 0.5) !important;
    background: rgba(239, 68, 68, 0.05);
}

/* Ghost preview styling */
.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.9;
    transform: rotate(3deg) scale(1.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Slot accepts drop indicator */
.drop-slot.accepts-drop {
    border-color: rgba(129, 182, 76, 0.5);
}

.drop-slot.accepts-drop .card-empty .card-hint {
    color: var(--accent-green);
}

/* ==============================================
   LEGACY BLOCK CONTENT (keeping for compatibility)
   ============================================== */

.block-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    position: relative;
}

.block-content.active {
    padding: 10px 12px;
    padding-right: 36px; /* Space for remove button */
    background: var(--bg-hover);
    border-radius: 6px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.block-header {
    display: flex;
    align-items: center;
    gap: 6px;
}

.block-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-icon svg {
    width: 14px;
    height: 14px;
}

.block-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.block-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* In active slot context, show description only if no sentence */
.drop-slot .block-content.active .block-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Remove button (only shown in active/slot mode) */
.block-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all var(--transition-fast);
}

.block-remove:hover {
    opacity: 1;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

.block-remove svg {
    width: 14px;
    height: 14px;
}

/* Parameters section - shared styles */
.block-params {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.block-params .param-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.block-params .param-row label {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 0;
    flex-shrink: 0;
}

.block-params .param-input {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    font-size: 11px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-primary);
}

.block-params .param-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* Disabled/preview state */
.block-params .param-row.disabled label {
    opacity: 0.5;
}

.block-params .param-row.disabled .param-input {
    color: var(--text-muted);
    opacity: 0.4;
    cursor: grab;
    pointer-events: none;
    background: var(--bg-primary);
}

/* ================================================
   SENTENCE-STYLE BLOCK LAYOUT
   Semantic fill-in-the-blank style for conditions
   ================================================ */

.block-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-primary);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* In active slot context, show sentence with editable inputs */
.drop-slot .block-sentence {
    background: var(--bg-secondary);
    margin-top: 8px;
}

.block-sentence.preview {
    background: transparent;
    padding: 4px 0;
    margin-top: 4px;
    font-size: 10px;
}

.block-sentence .sentence-text {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.block-sentence:not(.preview) .sentence-text {
    color: var(--text-secondary);
    font-size: 11px;
}

.block-sentence .sentence-input-wrap {
    display: inline-flex;
    align-items: center;
}

/* Inline select dropdowns */
.sentence-select {
    padding: 2px 18px 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-green);
    border-radius: 3px;
    color: var(--accent-green);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2381b64c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    min-width: 50px;
}

.sentence-select:hover:not(:disabled) {
    background-color: rgba(129, 182, 76, 0.15);
}

.sentence-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.25);
}

.sentence-select:disabled {
    opacity: 0.6;
    cursor: grab;
    background-image: none;
    padding-right: 6px;
    min-width: 35px;
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Piece dropdown with icons */
.piece-dropdown-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

.piece-dropdown {
    padding: 2px 20px 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-green);
    border-radius: 3px;
    color: var(--accent-green);
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%2381b64c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    min-width: 70px;
}

.piece-dropdown:hover:not(:disabled) {
    background-color: rgba(129, 182, 76, 0.15);
}

.piece-dropdown:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.25);
}

.piece-dropdown:disabled {
    opacity: 0.6;
    cursor: grab;
    background-image: none;
    padding-right: 6px;
    border-color: var(--border-color);
    color: var(--text-muted);
}

.piece-dropdown-icon {
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) saturate(100%) invert(68%) sepia(61%) saturate(367%) hue-rotate(50deg) brightness(95%) contrast(86%);
}

.piece-dropdown-icon[data-piece="pawn"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wp.png');
}
.piece-dropdown-icon[data-piece="knight"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wn.png');
}
.piece-dropdown-icon[data-piece="bishop"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wb.png');
}
.piece-dropdown-icon[data-piece="rook"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wr.png');
}
.piece-dropdown-icon[data-piece="queen"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wq.png');
}
.piece-dropdown-icon[data-piece="king"] {
    background-image: url('https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png');
}

/* Inline number inputs */
.sentence-number {
    padding: 2px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-green);
    border-radius: 3px;
    color: var(--accent-green);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    transition: all var(--transition-fast);
    -moz-appearance: textfield;
    width: 40px;
}

.sentence-number::-webkit-outer-spin-button,
.sentence-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sentence-number:hover:not(:disabled) {
    background-color: rgba(129, 182, 76, 0.15);
}

.sentence-number:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.25);
}

.sentence-number:disabled {
    opacity: 0.6;
    cursor: grab;
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Inline formula input */
.sentence-formula {
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-green);
    border-radius: 3px;
    color: var(--accent-green);
    font-family: var(--font-mono);
    font-size: 10px;
    min-width: 80px;
    max-width: 120px;
    transition: all var(--transition-fast);
}

.sentence-formula:hover:not(:disabled) {
    background-color: rgba(129, 182, 76, 0.15);
}

.sentence-formula:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.15);
}

.sentence-formula.invalid {
    border-color: #ef4444;
    color: #ef4444;
}

.sentence-formula:disabled {
    opacity: 0.5;
    cursor: grab;
}

/* Comparison operator symbols - special styling */
.sentence-select option[value="at_least"],
.sentence-select option[value="at_most"],
.sentence-select option[value="exactly"],
.sentence-select option[value="more_than"],
.sentence-select option[value="less_than"],
.sentence-select option[value="less_equal"],
.sentence-select option[value="greater_equal"] {
    font-family: var(--font-mono);
    font-weight: 600;
}

.block-info {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

/* Highlight animation for catalog sections */
.block-grid.highlight {
    animation: highlight-pulse 1s ease-out;
}

@keyframes highlight-pulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px rgba(129, 182, 76, 0.4); }
}

/* Rule Builder Area (Center) */
.rule-builder-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 100%;
}

.eval-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-panel);
    border-radius: 8px;
}

.eval-name-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
}

.eval-name-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.builder-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.action-btn svg {
    width: 16px;
    height: 16px;
}

.action-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-green);
}

.action-btn.publish-btn {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
    color: #1a1a1a;
    font-weight: 600;
}

.action-btn.publish-btn:hover {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
}

/* Edit mode styles */
.action-btn.edit-mode {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #2563eb;
    color: #fff;
    font-weight: 600;
}

.action-btn.edit-mode:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Templates button with badge */
.action-btn.templates-btn {
    position: relative;
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.15) 0%, rgba(123, 97, 255, 0.05) 100%);
    border-color: rgba(123, 97, 255, 0.4);
}

.action-btn.templates-btn:hover {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.25) 0%, rgba(123, 97, 255, 0.15) 100%);
    border-color: var(--accent-purple);
    box-shadow: 0 4px 16px rgba(123, 97, 255, 0.25);
}

.templates-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, var(--accent-purple) 0%, #9b7bff 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(123, 97, 255, 0.4);
    pointer-events: none;
}

.rule-builder.edit-mode {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

.rule-builder.edit-mode::before {
    content: 'Editing Rule';
    display: block;
    padding: 6px 12px;
    margin: -20px -20px 16px -20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px 6px 0 0;
}

.templates-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-panel);
    border-radius: 8px;
}

.templates-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.template-btn {
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.template-btn:hover {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #fff;
}

/* Rule Builder */
.rule-builder {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.builder-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.builder-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

/* Sentence-based Rule Builder - Vertical Layout */
.rule-sentence-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sentence-step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    transition: background var(--transition-fast);
}

.sentence-step:hover {
    background: var(--bg-hover);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--accent-green);
    color: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
}

.step-condition .step-number {
    background: #f59e0b;
}

.step-target .step-number {
    background: #3b82f6;
}

.step-value .step-number {
    background: #10b981;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.step-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-condition .step-title {
    color: #f59e0b;
}

.step-target .step-title {
    color: #3b82f6;
}

.step-value .step-title {
    color: #10b981;
}

.step-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
}

/* Sentence connector between steps */
.sentence-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 36px;
}

.connector-line {
    display: none;
}

.connector-word {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    white-space: nowrap;
}

/* Drop slots in sentence builder */
.drop-slot {
    width: 100%;
    min-height: 70px;
    background: var(--bg-primary);
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

.drop-slot:hover {
    border-color: var(--accent-green);
    background: rgba(129, 182, 76, 0.05);
}

.drop-slot.empty {
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* When slot has a block-tile, adjust styling */
.drop-slot:not(.empty) {
    padding: 0;
    border-style: solid;
}

/* Block tile inside slot inherits full width */
.drop-slot .block-tile {
    border: none;
    border-radius: 6px;
    width: 100%;
}

/* Empty slot uses card-empty HTML structure */
.drop-slot .card-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

.drop-slot .card-empty .card-icon {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    opacity: 0.6;
}

.drop-slot .card-empty .card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.drop-slot .card-empty .card-hint {
    font-size: 10px;
    color: var(--text-muted);
}

/* Legacy slot-placeholder styling */
.drop-slot .slot-placeholder {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.slot-placeholder .placeholder-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    color: var(--text-muted);
    opacity: 0.6;
}

.slot-placeholder .placeholder-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.slot-placeholder .placeholder-hint {
    display: none;
}

/* Slot type colors */
.condition-slot.drop-slot {
    border-color: rgba(245, 158, 11, 0.4);
}

.condition-slot.drop-slot:not(.empty) {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}

.condition-slot .card-empty .card-icon {
    color: #f59e0b;
}

.target-slot.drop-slot {
    border-color: rgba(59, 130, 246, 0.4);
}

.target-slot.drop-slot:not(.empty) {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.target-slot .card-empty .card-icon {
    color: #3b82f6;
}

.value-slot.drop-slot {
    border-color: rgba(16, 185, 129, 0.4);
}

.value-slot.drop-slot:not(.empty) {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.value-slot .card-empty .card-icon {
    color: #10b981;
}

/* Empty required slots show subtle indicator */
.drop-slot.empty.required {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.02);
}

.drop-slot.empty.required:hover {
    border-color: var(--accent-green);
    background: rgba(129, 182, 76, 0.05);
}

.drop-slot.empty.required .placeholder-icon,
.drop-slot.empty.required .card-icon {
    color: rgba(239, 68, 68, 0.5);
}

/* Rule name section - inline */
.rule-name-section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.rule-name-section label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.rule-name-section .label-icon {
    width: 14px;
    height: 14px;
}

.rule-name-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
}

.rule-name-input:focus {
    outline: none;
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.15);
}

.rule-name-input::placeholder {
    color: var(--text-muted);
}

/* Legacy builder-row removed, keeping compatibility */
.builder-row {
    margin-bottom: 16px;
}

.builder-row label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Legacy slots removed, using sentence builder instead */
.builder-slots {
    display: none;
}

.slot-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 220px;
    flex-shrink: 0;
}

.slot-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-align: center;
}

.slot-group label .required {
    color: #ef4444;
}

.slot-connector {
    display: none;
}

.drop-slot.empty.required::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(239, 68, 68, 0.03) 10px,
        rgba(239, 68, 68, 0.03) 20px
    );
    pointer-events: none;
}

/* When slot has content, show it nicely styled - expand as needed */
.drop-slot:not(.empty) {
    border-style: solid;
    border-color: var(--accent-green);
    background: rgba(129, 182, 76, 0.08);
    min-height: 56px;
    padding: 12px 16px;
}

/* Shake animation for validation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.drop-slot.shake {
    animation: shake 0.5s ease-in-out;
    border-color: #ef4444 !important;
}

.drop-slot.drag-over {
    border-color: var(--accent-green);
    background: rgba(129, 182, 76, 0.15);
    transform: scale(1.01);
}

/* Slot type color indicators (used on .block-content.active within slots) */
.drop-slot .block-content.active {
    border-left: 3px solid var(--border-color);
}

.condition-slot .block-content.active {
    border-left: 3px solid #f59e0b;
}

.target-slot .block-content.active {
    border-left: 3px solid #3b82f6;
}

.value-slot .block-content.active {
    border-left: 3px solid #10b981;
}

/* Legacy param styles kept for compatibility */
.param-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.param-row label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 0;
    text-transform: none;
}

.param-input {
    flex: 1;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 11px;
}

.param-input:focus {
    outline: none;
    border-color: var(--accent-green);
}

/* Formula Input */
.formula-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.formula-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.formula-input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 6px 8px;
}

.formula-input.invalid {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Parameter Label Container with Info Button */
.param-label-container {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.param-info-btn {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    padding: 0;
}

.param-info-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.param-info-btn svg {
    width: 10px;
    height: 10px;
}

.param-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    width: max-content;
    max-width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.param-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.param-tooltip::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.formula-info-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.formula-info-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.formula-info-btn svg {
    width: 14px;
    height: 14px;
}

.formula-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.formula-tooltip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.formula-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.tooltip-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.tooltip-item {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tooltip-item code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent-green);
}

.tooltip-note {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
    font-style: italic;
}

.formula-validation {
    font-size: 10px;
    padding: 0;
    min-height: 0;
    line-height: 1.2;
}

.formula-validation:not(:empty) {
    padding-top: 2px;
}

.formula-validation.valid {
    color: var(--accent-green);
}

.formula-validation.invalid {
    color: #ef4444;
}

.builder-buttons {
    display: flex;
    gap: 8px;
}

.primary-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--accent-green);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.primary-btn svg {
    width: 18px;
    height: 18px;
}

.primary-btn:hover {
    background: var(--accent-green-dark);
}

.secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.secondary-btn svg {
    width: 18px;
    height: 18px;
}

.secondary-btn:hover {
    background: var(--bg-secondary);
}

/* Rules List (Third Column) */
.rules-list-container {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

.rules-list-container h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    flex-shrink: 0;
}

.rules-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

.rules-list {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    align-content: start;
    padding-right: 4px;
}

.empty-rules {
    padding: 30px 15px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Rule cards list */
.rule-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    padding: 8px 10px;
    flex-shrink: 0;
}

.rule-item:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
    z-index: 10;
}

.rule-item.disabled {
    opacity: 0.45;
}

/* Card header */
.rule-item .rule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.rule-item .rule-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    flex: 1;
}

.rule-item.enabled .rule-name {
    color: var(--accent-green);
}

.rule-item .rule-number {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Rule description */
.rule-item .rule-desc {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.rule-item .rule-desc em {
    color: #f59e0b;
    font-style: normal;
}

.rule-item .rule-desc strong {
    color: #10b981;
}

/* Action buttons */
.rule-item .rule-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    gap: 4px;
}

.rule-item:hover .rule-actions {
    display: flex;
}

.rule-item:hover .rule-number {
    display: none;
}

.rule-item .rule-actions button {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.rule-item .rule-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.rule-item .rule-actions button svg {
    width: 12px;
    height: 12px;
}

.rule-item .rule-actions .delete-btn:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.rule-item .rule-actions .toggle-btn:hover {
    color: #f59e0b;
    border-color: #f59e0b;
}

.rule-item .rule-actions .edit-btn:hover {
    color: #3b82f6;
    border-color: #3b82f6;
}

/* Category color indicators */
.rule-item[data-category="material"] {
    border-left: 3px solid #fbbf24;
}

.rule-item[data-category="mobility"] {
    border-left: 3px solid #3b82f6;
}

.rule-item[data-category="king_safety"] {
    border-left: 3px solid #ef4444;
}

.rule-item[data-category="pawn_structure"] {
    border-left: 3px solid #10b981;
}

.rule-item[data-category="positional"] {
    border-left: 3px solid #8b5cf6;
}

.rule-item[data-category="piece_coordination"] {
    border-left: 3px solid #06b6d4;
}

.rule-item[data-category="threats"] {
    border-left: 3px solid #f97316;
}

/* Tooltip for rule details on hover */
.rule-item .rule-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 160px;
    max-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.15s ease;
    pointer-events: none;
    margin-bottom: 6px;
}

.rule-item:hover .rule-tooltip {
    opacity: 1;
    visibility: visible;
}

.rule-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-panel);
}

.rule-tooltip .tooltip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.rule-tooltip .tooltip-category {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.rule-tooltip .tooltip-preview {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.rule-tooltip .tooltip-preview em {
    color: #f59e0b;
    font-style: normal;
}

.rule-tooltip .tooltip-preview strong {
    color: #10b981;
}

.rule-tooltip .tooltip-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

.rule-tooltip .tooltip-actions button {
    flex: 1;
    padding: 4px 8px;
    font-size: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    pointer-events: auto;
}

.rule-tooltip .tooltip-actions button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.rule-tooltip .tooltip-actions .edit-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.rule-tooltip .tooltip-actions .delete-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Legacy styles for expanded view (keep for compatibility) */
.rule-header-full {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-hover);
}

.rule-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    cursor: pointer;
}

.rule-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    border-radius: 20px;
    transition: all var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    top: 2px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all var(--transition-fast);
}

.rule-toggle input:checked + .toggle-slider {
    background: var(--accent-green);
}

.rule-toggle input:checked + .toggle-slider::before {
    background: #fff;
    transform: translateX(16px);
}

.rule-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.rule-category {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    color: var(--text-muted);
    font-weight: 500;
}

.rule-actions {
    display: flex;
    gap: 4px;
}

.rule-actions button {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.rule-actions button svg {
    width: 16px;
    height: 16px;
}

.rule-edit:hover {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.rule-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Weights Panel (Right) */
.weights-panel {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 20px;
    height: fit-content;
}

.weights-panel h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.weights-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.category-weights {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.weight-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.weight-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
}

.weight-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-secondary);
    border-radius: 3px;
    outline: none;
}

.weight-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-green);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.weight-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.weight-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-green);
    font-family: var(--font-mono);
}

.weights-help {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.weights-help h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.help-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.help-list li {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-left: 12px;
    position: relative;
    line-height: 1.4;
}

.help-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-green);
}

.help-list li strong {
    color: var(--text-secondary);
}

.help-list code {
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent-green);
}

.preset-btn {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-fast);
}

.preset-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-green);
    color: var(--text-primary);
}

/* Notifications */
.eval-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transition: transform 0.3s ease;
}

.eval-notification.show {
    transform: translateX(-50%) translateY(0);
}

.eval-notification.success {
    border-color: var(--accent-green);
    background: rgba(30, 35, 28, 0.95);
}

.eval-notification.error {
    border-color: #ef4444;
    background: rgba(40, 28, 28, 0.95);
}

.eval-notification.info {
    border-color: #3b82f6;
    background: rgba(28, 32, 40, 0.95);
}

/* Responsive for Eval Builder */
@media (max-width: 1400px) {
    .eval-builder-layout {
        grid-template-columns: 220px 1fr 240px;
    }
}

@media (max-width: 1100px) {
    .eval-builder-layout {
        grid-template-columns: 200px 1fr 220px;
        gap: 8px;
    }
}

@media (max-width: 900px) {
    .eval-builder-layout {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        height: auto;
        min-height: calc(100vh - 80px);
    }
    
    .block-catalog {
        grid-column: 1 / -1;
        max-height: 250px;
    }
    
    .sentence-connector {
        padding: 0 0 0 20px;
    }
}

@media (max-width: 600px) {
    .eval-builder-layout {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .block-catalog {
        max-height: 200px;
    }
    
    .catalog-section {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 4px;
    }
    
    .catalog-section h3 {
        grid-column: 1 / -1;
    }
    
    .block-grid {
        display: contents;
    }
}

/* ===============================================
   LEADERBOARD STYLES
   =============================================== */

.leaderboard-layout {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    box-sizing: border-box;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.leaderboard-title h1 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.leaderboard-title .title-icon {
    color: #fbbf24;
    width: 32px;
    height: 32px;
}

.leaderboard-title .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

.leaderboard-actions {
    display: flex;
    gap: 12px;
}

.leaderboard-actions .action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.leaderboard-actions .action-btn:hover {
    background: var(--bg-hover);
}

.leaderboard-actions .action-btn.primary {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

.leaderboard-actions .action-btn.primary:hover {
    background: var(--accent-green-dark);
}

.leaderboard-actions .action-btn svg {
    width: 16px;
    height: 16px;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.stat-card.highlight {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
    border-color: rgba(251, 191, 36, 0.3);
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border-radius: 10px;
}

.stat-icon svg {
    width: 24px;
    height: 24px;
    color: var(--accent-green);
}

.stat-card.highlight .stat-icon svg {
    color: #fbbf24;
}

.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* Leaderboard Table */
.leaderboard-table-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
}

.leaderboard-table th:hover {
    background: var(--bg-hover);
}

.leaderboard-table th[data-sort]:after {
    content: '↕';
    margin-left: 6px;
    opacity: 0.3;
}

.leaderboard-table th.sort-asc:after {
    content: '↑';
    opacity: 1;
    color: var(--accent-green);
}

.leaderboard-table th.sort-desc:after {
    content: '↓';
    opacity: 1;
    color: var(--accent-green);
}

.leaderboard-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.leaderboard-table tbody tr {
    transition: background var(--transition-fast);
}

.leaderboard-table tbody tr:hover {
    background: var(--bg-hover);
}

.leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bg-panel);
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
}

.rank-1 .rank-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1a1a;
}

.rank-2 .rank-badge {
    background: linear-gradient(135deg, #d1d5db, #9ca3af);
    color: #1a1a1a;
}

.rank-3 .rank-badge {
    background: linear-gradient(135deg, #cd7f32, #b87333);
    color: white;
}

/* Name Cell */
.name-cell .eval-name {
    font-weight: 600;
    color: var(--text-primary);
}

.name-cell .eval-author {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ELO Cell */
.elo-cell {
    font-family: var(--font-mono);
}

.elo-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-green);
}

.elo-confidence {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

/* Record Cell */
.record-cell {
    font-family: var(--font-mono);
    font-size: 13px;
}

.record-cell .wins { color: var(--accent-green); }
.record-cell .losses { color: #ef4444; }
.record-cell .draws { color: var(--text-muted); }
.record-cell .separator { color: var(--text-muted); margin: 0 2px; }

/* Actions Cell */
.actions-cell {
    display: flex;
    gap: 8px;
}

.actions-cell button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.actions-cell button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.actions-cell button svg {
    width: 16px;
    height: 16px;
}

.actions-cell .play-btn:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
}

/* Empty / Loading / Error States */
.empty-row td,
.loading-row td,
.error-row td {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
}

.loading-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.error-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.retry-btn {
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
}

.retry-btn:hover {
    background: var(--bg-hover);
}

/* How It Works Section */
.how-it-works {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.how-it-works h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.how-it-works h3 svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.step {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-panel);
    border-radius: 8px;
}

.step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-green);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: white;
}

.step p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Modal Styles */
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 0;
}

.modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    max-width: 540px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-content h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-content h2 svg {
    width: 24px;
    height: 24px;
    color: var(--accent-green);
}

.modal-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* Upload Form */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-green);
}

.form-group textarea {
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 12px;
}

.inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-left: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.inline-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.inline-btn svg {
    width: 12px;
    height: 12px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
}

.form-actions .secondary-btn {
    padding: 12px 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.form-actions .secondary-btn:hover {
    background: var(--bg-hover);
}

.form-actions .primary-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--accent-green);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.form-actions .primary-btn:hover {
    background: var(--accent-green-dark);
}

.form-actions .primary-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.form-actions .primary-btn svg {
    width: 16px;
    height: 16px;
}

/* Eval Details Modal */
.eval-details-content {
    max-width: 600px;
}

.eval-header {
    margin-bottom: 20px;
}

.eval-header h2 {
    font-size: 24px;
    margin-bottom: 4px;
}

.author-tag {
    font-size: 14px;
    color: var(--text-muted);
}

.eval-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.eval-stat {
    text-align: center;
    padding: 16px;
    background: var(--bg-panel);
    border-radius: 10px;
}

.eval-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-green);
    font-family: var(--font-mono);
}

.eval-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.eval-stat-confidence {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.eval-description,
.eval-rules-summary {
    margin-bottom: 20px;
}

.eval-description h4,
.eval-rules-summary h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.eval-description p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.rules-list-preview {
    max-height: 150px;
    overflow-y: auto;
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 12px;
}

.rule-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.rule-summary:last-child {
    border-bottom: none;
}

.rule-summary .rule-name {
    font-size: 13px;
    color: var(--text-primary);
}

.rule-summary .rule-category {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

.eval-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.eval-actions .primary-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: var(--accent-green);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.eval-actions .primary-btn:hover {
    background: var(--accent-green-dark);
}

.eval-actions .primary-btn svg {
    width: 18px;
    height: 18px;
}

/* Leaderboard Notification */
.leaderboard-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 10000;
    transition: transform 0.3s ease;
}

.leaderboard-notification.show {
    transform: translateX(-50%) translateY(0);
}

.leaderboard-notification.success {
    border-color: var(--accent-green);
    background: rgba(30, 35, 28, 0.95);
}

.leaderboard-notification.error {
    border-color: #ef4444;
    background: rgba(40, 28, 28, 0.95);
}

.leaderboard-notification.info {
    border-color: #3b82f6;
    background: rgba(28, 32, 40, 0.95);
}

/* Responsive Leaderboard */
@media (max-width: 768px) {
    .leaderboard-layout {
        padding: 16px;
    }
    
    .leaderboard-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .leaderboard-actions {
        justify-content: flex-end;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .leaderboard-table {
        font-size: 13px;
    }
    
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 10px 12px;
    }
    
    .eval-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LIVE GAME VIEWER - Enhanced with proper board
   ============================================ */

.live-viewer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-height: 90vh;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    overflow: hidden;
    font-family: var(--font-main);
}

.live-viewer.visible {
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header */
.live-viewer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #2a2725 0%, #1e1d1b 100%);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #555;
    border-radius: 50%;
    transition: all 0.3s;
}

.live-dot.active {
    background: #ff4444;
    box-shadow: 0 0 8px #ff4444;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px #ff4444; }
    50% { opacity: 0.6; box-shadow: 0 0 4px #ff4444; }
}

.live-text {
    font-size: 10px;
    font-weight: 800;
    color: #ff4444;
    letter-spacing: 1.5px;
}

.live-title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.live-header-actions {
    display: flex;
    gap: 4px;
}

.live-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.live-btn svg {
    width: 14px;
    height: 14px;
}

/* Content */
.live-viewer-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.live-viewer-content.minimized {
    max-height: 0 !important;
}

/* ============================================
   MULTI-GAME THUMBNAIL GRID
   ============================================ */

.game-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.game-thumbnails:empty {
    display: none;
}

.game-thumb {
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.game-thumb:hover {
    background: var(--bg-hover);
    transform: translateY(-1px);
}

.game-thumb.focused {
    border-color: var(--accent-purple);
    box-shadow: 0 0 8px rgba(123, 97, 255, 0.3);
}

.game-thumb.completed.win {
    border-color: var(--accent-green);
}

.game-thumb.completed.loss {
    border-color: #ff4444;
}

.game-thumb.completed.draw {
    border-color: #888;
}

.game-thumb.waiting {
    opacity: 0.6;
}

.game-thumb.in_progress {
    animation: thumbPulse 2s infinite;
}

@keyframes thumbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(123, 97, 255, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.2); }
}

/* Mini Board in Thumbnail */
.thumb-mini-board {
    padding: 2px;
}

.mini-board-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    aspect-ratio: 1;
    border-radius: 2px;
    overflow: hidden;
}

.mini-square {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-square.light {
    background-color: #eeeed2;
}

.mini-square.dark {
    background-color: #769656;
}

.mini-square.last-move.light {
    background-color: #f6f669;
}

.mini-square.last-move.dark {
    background-color: #baca44;
}

.mini-piece {
    width: 80%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Mini piece images - using CSS pseudo elements for simplicity */
.mini-piece.white.k { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linejoin="miter" d="M22.5 11.63V6M20 8h5"/><path fill="%23fff" stroke-linecap="butt" stroke-linejoin="miter" d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5"/><path fill="%23fff" d="M12.5 37c5.5 3.5 14.5 3.5 20 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-2.5-7.5-12-10.5-16-4-3 6 6 10.5 6 10.5v7"/><path d="M12.5 30c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0"/></g></svg>'); }
.mini-piece.white.q { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="%23fff" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5 9 26z"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1 2.5-1 2.5-1.5 1.5 0 2.5 0 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z"/><path fill="none" d="M11.5 30c3.5-1 18.5-1 22 0M12 33.5c6-1 15-1 21 0"/><circle cx="6" cy="12" r="2"/><circle cx="14" cy="9" r="2"/><circle cx="22.5" cy="8" r="2"/><circle cx="31" cy="9" r="2"/><circle cx="39" cy="12" r="2"/></g></svg>'); }
.mini-piece.white.r { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="%23fff" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="butt" d="M9 39h27v-3H9v3zm3-3v-4h21v4H12zm-1-22V9h4v2h5V9h5v2h5V9h4v5"/><path d="M34 14l-3 3H14l-3-3"/><path stroke-linecap="butt" stroke-linejoin="miter" d="M31 17v12.5H14V17"/><path d="M31 29.5l1.5 2.5h-20l1.5-2.5"/><path fill="none" stroke-linejoin="miter" d="M11 14h23"/></g></svg>'); }
.mini-piece.white.b { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="%23fff" stroke-linecap="butt"><path d="M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path stroke-linejoin="miter" d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5"/></g></svg>'); }
.mini-piece.white.n { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="%23fff" d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21"/><path fill="%23fff" d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3"/><path fill="%23000" d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0zm5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5z"/></g></svg>'); }
.mini-piece.white.p { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><path d="M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" fill="%23fff" stroke="%23000" stroke-linecap="round" stroke-width="1.5"/></svg>'); }
.mini-piece.black.k { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linejoin="miter" d="M22.5 11.63V6"/><path fill="%23000" stroke-linecap="butt" stroke-linejoin="miter" d="M22.5 25s4.5-7.5 3-10.5c0 0-1-2.5-3-2.5s-3 2.5-3 2.5c-1.5 3 3 10.5 3 10.5"/><path fill="%23000" d="M12.5 37c5.5 3.5 14.5 3.5 20 0v-7s9-4.5 6-10.5c-4-6.5-13.5-3.5-16 4V27v-3.5c-2.5-7.5-12-10.5-16-4-3 6 6 10.5 6 10.5v7"/><path stroke-linejoin="miter" d="M20 8h5"/><path d="M32 29.5s8.5-4 6.03-9.65C34.15 14 25 18 22.5 24.5v2.1-2.1C20 18 10.85 14 6.97 19.85 4.5 25.5 13 29.5 13 29.5"/><path d="M12.5 30c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0m-20 3.5c5.5-3 14.5-3 20 0"/></g></svg>'); }
.mini-piece.black.q { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="%23000" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g stroke="none"><circle cx="6" cy="12" r="2.75"/><circle cx="14" cy="9" r="2.75"/><circle cx="22.5" cy="8" r="2.75"/><circle cx="31" cy="9" r="2.75"/><circle cx="39" cy="12" r="2.75"/></g><path stroke-linecap="butt" d="M9 26c8.5-1.5 21-1.5 27 0l2.5-12.5L31 25l-.3-14.1-5.2 13.6-3-14.5-3 14.5-5.2-13.6L14 25 6.5 13.5 9 26z"/><path d="M9 26c0 2 1.5 2 2.5 4 1 1.5 1 1 .5 3.5-1.5 1-1 2.5-1 2.5-1.5 1.5 0 2.5 0 2.5 6.5 1 16.5 1 23 0 0 0 1.5-1 0-2.5 0 0 .5-1.5-1-2.5-.5-2.5-.5-2 .5-3.5 1-2 2.5-2 2.5-4-8.5-1.5-18.5-1.5-27 0z" stroke-linecap="butt"/><path fill="none" stroke="%23ececec" d="M11 38.5a35 35 1 0 0 23 0"/><g fill="none" stroke="%23ececec"><path d="M11 29a35 35 1 0 1 23 0m-21.5 2.5h20m-21 3a35 35 1 0 0 22 0"/></g></g></svg>'); }
.mini-piece.black.r { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path stroke-linecap="butt" d="M9 39h27v-3H9v3zm3.5-7l1.5-2.5h17l1.5 2.5h-20zm-.5 4v-4h21v4H12z"/><path stroke-linecap="butt" stroke-linejoin="miter" d="M14 29.5v-13h17v13H14z"/><path stroke-linecap="butt" d="M14 16.5L11 14h23l-3 2.5H14zM11 14V9h4v2h5V9h5v2h5V9h4v5H11z"/><path fill="none" stroke="%23ececec" stroke-linejoin="miter" stroke-width="1" d="M12 35.5h21m-20-4h19m-18-2h17m-17-13h17M11 14h23"/></g></svg>'); }
.mini-piece.black.b { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><g fill="%23000" stroke-linecap="butt"><path d="M9 36c3.39-.97 10.11.43 13.5-2 3.39 2.43 10.11 1.03 13.5 2 0 0 1.65.54 3 2-.68.97-1.65.99-3 .5-3.39-.97-10.11.46-13.5-1-3.39 1.46-10.11.03-13.5 1-1.354.49-2.323.47-3-.5 1.354-1.94 3-2 3-2z"/><path d="M15 32c2.5 2.5 12.5 2.5 15 0 .5-1.5 0-2 0-2 0-2.5-2.5-4-2.5-4 5.5-1.5 6-11.5-5-15.5-11 4-10.5 14-5 15.5 0 0-2.5 1.5-2.5 4 0 0-.5.5 0 2z"/><path d="M25 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 1 1 5 0z"/></g><path stroke="%23ececec" stroke-linejoin="miter" d="M17.5 26h10M15 30h15m-7.5-14.5v5M20 18h5"/></g></svg>'); }
.mini-piece.black.n { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><g fill="none" fill-rule="evenodd" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="%23000" d="M22 10c10.5 1 16.5 8 16 29H15c0-9 10-6.5 8-21"/><path fill="%23000" d="M24 18c.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-.94 1.41-3.04 0-3-1 0 .19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-.73-.994-.5-2-.5-3 1-1 3 2.5 3 2.5h2s.78-1.992 2.5-3c1 0 1 3 1 3"/><path fill="%23ececec" d="M9.5 25.5a.5.5 0 1 1-1 0 .5.5 0 1 1 1 0zm5.433-9.75a.5 1.5 30 1 1-.866-.5.5 1.5 30 1 1 .866.5z"/><path fill="%23ececec" stroke="%23ececec" d="M24.55 10.4l-.45 1.45.5.15c3.15 1 5.65 2.49 7.9 6.75S35.75 29.06 35.25 39l-.05.5h2.25l.05-.5c.5-10.06-.88-16.85-3.25-21.34-2.37-4.49-5.79-6.64-9.19-7.16l-.51-.1z"/></g></svg>'); }
.mini-piece.black.p { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><path d="M22.5 9c-2.21 0-4 1.79-4 4 0 .89.29 1.71.78 2.38C17.33 16.5 16 18.59 16 21c0 2.03.94 3.84 2.41 5.03-3 1.06-7.41 5.55-7.41 13.47h23c0-7.92-4.41-12.41-7.41-13.47 1.47-1.19 2.41-3 2.41-5.03 0-2.41-1.33-4.5-3.28-5.62.49-.67.78-1.49.78-2.38 0-2.21-1.79-4-4-4z" stroke="%23000" stroke-linecap="round" stroke-width="1.5"/></svg>'); }

/* Thumbnail Info Bar */
.thumb-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: var(--bg-secondary);
    gap: 4px;
    min-height: 22px;
}

.thumb-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}

.thumb-color.white {
    background: #f0d9b5;
    color: #333;
}

.thumb-color.black {
    background: #333;
    color: #f0d9b5;
}

.thumb-opening {
    flex: 1;
    font-size: 8px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.thumb-result {
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
}

.thumb-result.win {
    background: var(--accent-green);
    color: #fff;
}

.thumb-result.loss {
    background: #ff4444;
    color: #fff;
}

.thumb-result.draw {
    background: #888;
    color: #fff;
}

.thumb-moves {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Batch Info in Match Info */
.batch-info {
    text-align: center;
    padding: 4px;
}

.batch-round {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.batch-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
}

.eval-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.vs-text {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

.sf-elo {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-purple);
    font-family: var(--font-mono);
}

.batch-games-label {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
}

.batch-result-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(123, 97, 255, 0.2);
    border: 1px solid rgba(123, 97, 255, 0.3);
    border-radius: 4px;
}

.batch-result-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Log Entry with Color */
.log-color {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    background: #333;
    color: #f0d9b5;
}

.log-color:contains('W') {
    background: #f0d9b5;
    color: #333;
}

.log-opening {
    color: var(--text-muted);
    font-size: 10px;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Board Placeholder */
.board-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 320px;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* ============================================
   GRAPH VIEW & MAIN DISPLAY TOGGLE
   ============================================ */

.live-main-display {
    position: relative;
    min-height: 200px;
}

.live-graph-view {
    padding: 10px;
    background: var(--bg-primary);
}

#elo-graph-canvas {
    width: 100%;
    height: 200px;
    border-radius: 6px;
}

.live-board-wrapper {
    position: relative;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
}

.close-board-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}

.close-board-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Move count display */
.move-count {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px;
    font-family: var(--font-mono);
}

.live-status-bar {
    padding: 6px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
}

.connection-status {
    color: var(--text-muted);
}

.connection-status.connected {
    color: var(--accent-green);
}

.connection-status.disconnected {
    color: #ff4444;
}

/* Match Info */
.live-match-info {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.live-waiting, .calc-starting {
    color: var(--text-muted);
    text-align: center;
    font-size: 13px;
    padding: 8px;
}

.match-players {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.match-player {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-player.black {
    flex-direction: row-reverse;
    text-align: right;
}

.player-color-indicator {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--border-color);
}

.player-color-indicator.white {
    background: #f0d9b5;
}

.player-color-indicator.black {
    background: #333;
}

.player-info .player-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.player-info .player-type {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-vs {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
}

.match-result-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    animation: resultPop 0.3s ease-out;
}

@keyframes resultPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.match-result-banner.win {
    background: linear-gradient(135deg, rgba(129, 182, 76, 0.3) 0%, rgba(98, 153, 36, 0.2) 100%);
    border: 1px solid rgba(129, 182, 76, 0.4);
}

.match-result-banner.loss {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.3) 0%, rgba(200, 50, 50, 0.2) 100%);
    border: 1px solid rgba(255, 68, 68, 0.4);
}

.match-result-banner.draw {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(200, 150, 0, 0.2) 100%);
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.match-result-banner .result-icon {
    font-size: 18px;
}

.match-result-banner .result-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Chess Board - Uses same styling as main board */
.live-board-wrapper {
    padding: 10px;
    display: flex;
    justify-content: center;
    background: var(--bg-primary);
}

.live-board {
    display: grid;
    grid-template-columns: repeat(8, 40px);
    grid-template-rows: repeat(8, 40px);
    border: 3px solid #5a5652;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Reuse main board square styling */
.live-board .square {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.live-board .square.light {
    background-color: var(--square-light);
}

.live-board .square.dark {
    background-color: var(--square-dark);
}

.live-board .square.last-move.light {
    background-color: var(--square-last-move-light);
}

.live-board .square.last-move.dark {
    background-color: var(--square-last-move-dark);
}

/* Reuse piece styling from main board */
.live-board .piece {
    width: 85%;
    height: 85%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.3));
}

.live-board .piece.piece-animate {
    animation: pieceSlide 0.15s ease-out;
}

@keyframes pieceSlide {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

/* ELO Tracker */
.live-elo-tracker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #2a2725 0%, #252320 100%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.elo-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.elo-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.elo-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-purple);
    font-family: var(--font-mono);
    line-height: 1;
}

.elo-record {
    display: flex;
    gap: 8px;
}

.elo-record span {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.record-wins {
    background: rgba(129, 182, 76, 0.2);
    color: var(--accent-green);
}

.record-draws {
    background: rgba(150, 150, 150, 0.2);
    color: var(--text-secondary);
}

.record-losses {
    background: rgba(255, 68, 68, 0.2);
    color: #ff6b6b;
}

/* Game Log */
.live-game-log {
    padding: 8px 14px 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    max-height: 120px;
    overflow: hidden;
}

.log-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.log-entries {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 90px;
    overflow-y: auto;
}

.log-empty {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.log-entry.win {
    background: rgba(129, 182, 76, 0.15);
}

.log-entry.loss {
    background: rgba(255, 68, 68, 0.15);
}

.log-entry.draw {
    background: rgba(150, 150, 150, 0.15);
}

.log-result {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 3px;
}

.log-entry.win .log-result {
    background: var(--accent-green);
    color: #fff;
}

.log-entry.loss .log-result {
    background: #ff4444;
    color: #fff;
}

.log-entry.draw .log-result {
    background: #888;
    color: #fff;
}

.log-opponent {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.log-moves {
    color: var(--text-muted);
    font-size: 11px;
}

/* Progress */
.live-progress {
    padding: 10px 14px;
    background: var(--bg-primary);
}

.progress-bar {
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green) 0%, #5cb85c 100%);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.calc-complete, .calc-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
}

.calc-complete {
    background: rgba(129, 182, 76, 0.2);
}

.calc-error {
    background: rgba(255, 68, 68, 0.2);
}

.complete-icon, .error-icon {
    font-size: 16px;
}

.complete-text, .error-text {
    font-size: 13px;
    color: var(--text-primary);
}

.calc-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.view-leaderboard-btn {
    background: linear-gradient(135deg, var(--accent-green) 0%, #5cb85c 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-leaderboard-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(129, 182, 76, 0.4);
}

/* Mobile */
@media (max-width: 480px) {
    .live-viewer {
        width: calc(100vw - 20px);
        right: 10px;
        bottom: 10px;
    }
    
    .live-board {
        grid-template-columns: repeat(8, 36px);
        grid-template-rows: repeat(8, 36px);
    }
    
    .live-board .square {
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   EVAL DETAILS MODAL
   ============================================ */

#eval-details-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#eval-details-modal.active {
    display: flex;
}

.eval-details-content {
    background: var(--bg-panel);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-color);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #2a2725 0%, #1e1d1b 100%);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-close-btn svg {
    width: 18px;
    height: 18px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.eval-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.eval-author-badge {
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
}

.eval-date {
    font-size: 12px;
    color: var(--text-muted);
}

.eval-description-section {
    margin-bottom: 20px;
}

.eval-description-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}

.eval-description {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    background: var(--bg-secondary);
    padding: 12px 14px;
    border-radius: 8px;
}

.eval-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--bg-secondary);
    padding: 14px;
    border-radius: 8px;
    text-align: center;
}

.stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.stat-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.elo-card .stat-value {
    color: var(--accent-purple);
}

.record-display {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 14px !important;
}

.record-display .wins {
    color: var(--accent-green);
}

.record-display .draws {
    color: var(--text-secondary);
}

.record-display .losses {
    color: #ff6b6b;
}

.matches-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}

.matches-list {
    background: var(--bg-secondary);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.match-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.match-item:last-child {
    border-bottom: none;
}

.match-result {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
}

.match-item.win .match-result {
    background: var(--accent-green);
}

.match-item.loss .match-result {
    background: #ff4444;
}

.match-item.draw .match-result {
    background: #888;
}

.match-opponent {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary);
}

.match-moves {
    font-size: 12px;
    color: var(--text-muted);
}

.no-matches {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.modal-btn {
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
}

.modal-btn svg {
    width: 14px;
    height: 14px;
}

.modal-btn.secondary {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.modal-btn.secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-btn.primary {
    background: var(--accent-green);
    color: #fff;
}

.modal-btn.primary:hover {
    background: #72a448;
}

/* ================================
   Eval Confirmation Modal
   ================================ */

.eval-confirm-content {
    max-width: 480px;
}

.confirm-header h2 {
    margin-bottom: 16px;
}

.confirm-eval-info {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.confirm-eval-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.confirm-eval-stats {
    display: flex;
    gap: 16px;
}

.confirm-eval-stats .stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.confirm-eval-stats .stat svg {
    width: 14px;
    height: 14px;
}

.confirm-rules-summary {
    margin-bottom: 20px;
}

.confirm-rules-summary h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.confirm-rules-list {
    background: var(--bg-panel);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
}

.summary-category {
    margin-bottom: 12px;
}

.summary-category:last-child {
    margin-bottom: 0;
}

.category-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-green);
    margin-bottom: 6px;
    padding: 0 4px;
}

.category-rules {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-rule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 13px;
}

.summary-rule.disabled {
    opacity: 0.5;
}

.summary-rule .rule-name {
    color: var(--text-primary);
}

.summary-rule .rule-value {
    color: var(--accent-green);
    font-family: var(--font-mono);
    font-size: 12px;
}

.confirm-author-section {
    margin-bottom: 20px;
}

.confirm-author-section label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.confirm-author-section input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-size: 14px;
}

.confirm-author-section input:focus {
    outline: none;
    border-color: var(--accent-green);
}

.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-actions .primary-btn,
.confirm-actions .secondary-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.no-rules {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* ============================================
   PIECE SELECTOR COMPONENT
   ============================================ */

.piece-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.piece-selector-group {
    display: flex;
    gap: 4px;
}

.piece-selector-divider {
    width: 1px;
    height: 28px;
    background: var(--border-color);
    margin: 0 4px;
}

.piece-option {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-panel);
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.piece-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

.piece-option.selected {
    background: rgba(129, 182, 76, 0.2);
    border-color: var(--accent-green);
}

.piece-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.piece-icon-small {
    width: 16px;
    height: 16px;
}

.piece-pair-icons {
    display: flex;
    gap: 1px;
    align-items: center;
}

.piece-pair-option {
    width: 48px;
}

/* Legacy unicode fallback */
.piece-symbol {
    font-size: 24px;
    line-height: 1;
    color: var(--text-primary);
}

.piece-pair-symbol {
    font-size: 18px;
    letter-spacing: -6px;
}

/* Piece selector in preview mode (sidebar) */
.block-tile-preview .piece-selector {
    padding: 4px;
    background: transparent;
    gap: 2px;
}

.block-tile-preview .piece-option {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.block-tile-preview .piece-symbol {
    font-size: 16px;
}

.block-tile-preview .piece-pair-option {
    width: 32px;
}

.block-tile-preview .piece-pair-symbol {
    font-size: 12px;
    letter-spacing: -4px;
}

/* ============================================
   PIECE DROPDOWN COMPONENT
   Custom dropdown with SVG piece icons
   ============================================ */

.piece-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.piece-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: all 0.15s ease;
    min-width: 110px;
}

.piece-dropdown-trigger:hover {
    border-color: var(--accent-green);
    background: var(--bg-hover);
}

.piece-dropdown.open .piece-dropdown-trigger {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 2px rgba(129, 182, 76, 0.2);
}

.piece-dropdown-icons {
    display: flex;
    align-items: center;
    gap: 0;
}

.piece-dropdown-icon {
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.piece-dropdown-icons .piece-dropdown-icon:nth-child(2) {
    margin-left: -6px;
}

.piece-dropdown-text {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.piece-dropdown-arrow {
    opacity: 0.5;
    transition: transform 0.15s ease;
}

.piece-dropdown.open .piece-dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown menu */
.piece-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    width: max-content;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s ease;
    max-height: 300px;
    overflow-y: auto;
}

.piece-dropdown.open .piece-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.piece-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.1s ease;
}

.piece-dropdown-item:hover {
    background: var(--bg-hover);
}

.piece-dropdown-item.selected {
    background: rgba(129, 182, 76, 0.15);
    color: var(--accent-green);
}

.piece-dropdown-item-text {
    font-weight: 500;
}

.piece-dropdown-separator {
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.piece-dropdown-separator:first-child {
    border-top: none;
    margin-top: 0;
}

/* Compact version for inline sentence use */
.sentence-input-wrap .piece-dropdown-trigger {
    min-width: auto;
    padding: 2px 6px;
}

.sentence-input-wrap .piece-dropdown-icon {
    width: 16px;
    height: 16px;
}

/* Grid piece select wrapper */
.grid-piece-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.grid-piece-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ============================================
   TOGGLE GRID COMPONENT
   ============================================ */

.toggle-grid-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toggle-grid-preview {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border-color);
    transition: border-color 0.15s ease;
}

.toggle-grid-preview:hover {
    border-color: var(--accent-green);
}

.preview-cell {
    width: 100%;
    height: 100%;
}

.preview-cell.light {
    background: #eeeed2;
}

.preview-cell.dark {
    background: #769656;
}

.preview-cell.selected.light {
    background: rgba(129, 182, 76, 0.8);
}

.preview-cell.selected.dark {
    background: rgba(98, 153, 36, 0.9);
}

.toggle-grid-editor {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.toggle-grid-editor.expanded {
    display: flex;
}

.grid-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.preset-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-green);
}

.preset-btn.preset-clear {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.preset-btn.preset-clear:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

.toggle-grid-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 200px;
    height: 200px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid var(--border-color);
}

.grid-cell {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.1s ease;
    position: relative;
}

.grid-cell.light {
    background: #eeeed2;
}

.grid-cell.dark {
    background: #769656;
}

.grid-cell:hover {
    opacity: 0.8;
}

.grid-cell.selected {
    position: relative;
}

.grid-cell.selected::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--accent-green);
    border-radius: 2px;
    opacity: 0.8;
}

.grid-cell.selected.light::after {
    background: rgba(129, 182, 76, 0.9);
}

.grid-cell.selected.dark::after {
    background: rgba(98, 153, 36, 0.9);
}

/* Toggle grid in preview mode (sidebar) */
.block-tile-preview .toggle-grid-container {
    width: 48px;
}

.block-tile-preview .toggle-grid-preview {
    width: 48px;
    height: 48px;
    pointer-events: none;
    border-width: 1px;
}

.block-tile-preview .toggle-grid-editor {
    display: none !important;
}

/* ============================================
   NEW TARGET PREVIEW STYLES
   ============================================ */

.piece-selector-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
}

.piece-selector-preview .preview-piece {
    font-size: 18px;
    line-height: 1;
}

.piece-selector-preview .preview-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 4px;
}

.piece-selector-preview .preview-pair {
    font-size: 14px;
    letter-spacing: -4px;
}

.toggle-grid-preview-small {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 48px;
    height: 48px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mini-preview-cell {
    width: 100%;
    height: 100%;
}

.mini-preview-cell.light {
    background: #eeeed2;
}

.mini-preview-cell.dark {
    background: #769656;
}

.mini-preview-cell.selected.light {
    background: rgba(129, 182, 76, 0.8);
}

.mini-preview-cell.selected.dark {
    background: rgba(98, 153, 36, 0.9);
}

/* Highlight classes for mini boards */
.mini-cell.highlight-zone {
    background: rgba(123, 97, 255, 0.4) !important;
}

.mini-cell.highlight-passed {
    background: rgba(34, 197, 94, 0.7) !important;
}

/* Grid piece select wrapper in active mode */
.grid-piece-select-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-panel);
    border-radius: 6px;
}

.grid-piece-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.grid-piece-select {
    padding: 4px 8px;
    font-size: 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
}

/* Sentence after piece selector */
.sentence-after-selector {
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    margin-top: 8px;
}

/* ========================================
   INTRO MODAL STYLES
   ======================================== */

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.intro-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.intro-modal {
    position: relative;
    width: min(90vw, 680px);
    height: min(85vh, 620px);
    background: linear-gradient(180deg, rgba(30, 32, 44, 0.98) 0%, rgba(22, 24, 35, 0.99) 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 0 100px rgba(123, 97, 255, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalEnter 0.5s ease;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.intro-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
    z-index: 10;
}

.intro-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    transform: rotate(90deg);
}

.intro-close svg {
    width: 20px;
    height: 20px;
}

/* Slides Container */
.intro-slides {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.intro-slide {
    position: absolute;
    inset: 0;
    padding: 48px 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateX(60px);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.intro-slide.prev {
    transform: translateX(-60px);
}

.intro-slide h2 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.intro-slide p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 480px;
}

.intro-slide p strong {
    color: #81b64c;
    font-weight: 600;
}

/* Slide Graphics */
.slide-graphic {
    width: 100%;
    height: 220px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Welcome Graphic */
.welcome-graphic .chess-crown {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: crownPulse 2s ease-in-out infinite;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.3);
}

.welcome-graphic .chess-crown svg {
    width: 64px;
    height: 64px;
    color: #1a1a2e;
}

@keyframes crownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.floating-pieces {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.float-piece {
    position: absolute;
    width: 36px;
    height: 36px;
    opacity: 0.5;
    animation: floatPiece 6s ease-in-out infinite;
}

.float-piece.p1 { top: 20%; left: 15%; animation-delay: 0s; }
.float-piece.p2 { top: 15%; right: 20%; animation-delay: 1.5s; }
.float-piece.p3 { bottom: 25%; left: 20%; animation-delay: 3s; }
.float-piece.p4 { bottom: 20%; right: 15%; animation-delay: 4.5s; }

@keyframes floatPiece {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(10deg); }
}

/* Intro slide piece icons - using Lichess cburnett set */
.intro-piece {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    /* Silhouette effect with outline */
    filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* White pieces - bright white silhouette */
.intro-piece.white {
    filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}

/* Black pieces - darker silhouette with subtle outline */
.intro-piece.black {
    filter: brightness(0) invert(0.5) drop-shadow(0 0 1px rgba(180, 180, 180, 0.7)) drop-shadow(0 0 2px rgba(120, 120, 120, 0.3));
}

.intro-piece.white.king { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wK.svg'); }
.intro-piece.white.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wQ.svg'); }
.intro-piece.white.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wR.svg'); }
.intro-piece.white.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wB.svg'); }
.intro-piece.white.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wN.svg'); }
.intro-piece.white.pawn { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/wP.svg'); }

.intro-piece.black.king { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bK.svg'); }
.intro-piece.black.queen { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bQ.svg'); }
.intro-piece.black.rook { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bR.svg'); }
.intro-piece.black.bishop { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bB.svg'); }
.intro-piece.black.knight { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bN.svg'); }
.intro-piece.black.pawn { background-image: url('https://raw.githubusercontent.com/lichess-org/lila/master/public/piece/cburnett/bP.svg'); }

/* Floating pieces - larger size */
.float-piece.intro-piece {
    width: 36px;
    height: 36px;
}

/* TT board mini pieces */
.tt-board-mini .intro-piece {
    width: 20px;
    height: 20px;
    margin: 0 2px;
}

/* Quiescence board pieces */
.q-piece.intro-piece {
    width: 32px;
    height: 32px;
}

/* Formula board pieces */
.formula-board {
    display: flex;
    align-items: center;
    gap: 4px;
}

.formula-board .intro-piece {
    width: 22px;
    height: 22px;
}

.formula-vs {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 6px;
    font-weight: 600;
}

/* Minimax leaf pieces */
.mm-piece {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

/* Move ordering pieces */
.move-piece {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

.move-desc .move-piece:first-child {
    margin-right: 2px;
}

.move-desc .move-piece:last-child {
    margin-left: 2px;
}

/* Depth question pieces */
.depth-pieces {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.depth-piece {
    width: 28px;
    height: 28px;
}

/* Tree Graphic */
.tree-graphic .search-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tree-node {
    background: linear-gradient(135deg, #7b61ff 0%, #5a3fd4 100%);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.tree-node.root {
    background: linear-gradient(135deg, #81b64c 0%, #629924 100%);
}

.tree-level {
    display: flex;
    gap: 16px;
    position: relative;
}

.tree-level .tree-node.small {
    padding: 6px 12px;
    font-size: 12px;
    opacity: 0.7;
}

.tree-branch-label {
    position: absolute;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.explosion-text {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.explosion-text .big-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: numberPulse 1.5s ease-in-out infinite;
}

.explosion-text .small-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* Minimax Graphic */
.minimax-graphic .minimax-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mm-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 24px;
    border-radius: 12px;
}

.mm-node.max-node {
    background: linear-gradient(135deg, #81b64c 0%, #629924 100%);
}

.mm-node.min-node {
    background: linear-gradient(135deg, #ff6b6b 0%, #d63031 100%);
}

.mm-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.mm-icon {
    font-size: 20px;
}

.mm-level {
    display: flex;
    gap: 40px;
}

.mm-level.bottom {
    gap: 20px;
}

.mm-leaf {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* Pruning Graphic */
.pruning-graphic .pruning-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prune-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.prune-node {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.prune-node.explored {
    background: linear-gradient(135deg, #81b64c 0%, #629924 100%);
}

.prune-node.pruned {
    background: linear-gradient(135deg, #ff6b6b 0%, #d63031 100%);
    position: relative;
}

.prune-node .scissors {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: snip 0.6s ease-in-out infinite;
}

.prune-node .scissors svg {
    width: 20px;
    height: 20px;
    stroke: #ff6b6b;
    filter: drop-shadow(0 0 3px rgba(255, 107, 107, 0.8)) drop-shadow(0 0 6px rgba(255, 107, 107, 0.5));
}

@keyframes snip {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-15deg); }
}

.prune-level {
    display: flex;
    gap: 32px;
}

.prune-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.prune-leaves {
    display: flex;
    gap: 8px;
}

.prune-leaves .leaf {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.leaf.ok {
    background: rgba(129, 182, 76, 0.2);
    color: #81b64c;
}

.leaf.cut {
    background: rgba(255, 107, 107, 0.15);
    color: rgba(255, 107, 107, 0.4);
    text-decoration: line-through;
}

.prune-explanation {
    margin-top: 16px;
}

.cut-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Transposition Table Graphic - Compact version */
.tt-graphic .tt-demo.compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tt-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tt-demo.compact .tt-path {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tt-demo.compact .tt-path .move {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.tt-equals {
    font-size: 28px;
    font-weight: 700;
    color: #7b61ff;
}

.tt-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(129, 182, 76, 0.15) 0%, rgba(129, 182, 76, 0.08) 100%);
    border-radius: 12px;
    border: 1px solid rgba(129, 182, 76, 0.3);
}

.tt-board-mini {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tt-result-row .tt-label {
    font-size: 15px;
    font-weight: 600;
    color: #81b64c;
}

/* Null Move Graphic */
.null-move-graphic .null-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.null-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

.null-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.null-icon svg {
    width: 40px;
    height: 40px;
    stroke: #ffc107;
}

.null-text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.null-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.null-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
}

.null-box.still-winning {
    background: linear-gradient(135deg, rgba(129, 182, 76, 0.2) 0%, rgba(129, 182, 76, 0.1) 100%);
    border: 1px solid rgba(129, 182, 76, 0.4);
    color: #81b64c;
}

.result-icon {
    font-size: 18px;
}

.null-conclusion {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

/* Move Ordering Graphic */
.ordering-graphic .ordering-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.move-list-visual {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.move-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.move-item.top-priority {
    background: linear-gradient(90deg, rgba(129, 182, 76, 0.15) 0%, transparent 100%);
    border-color: rgba(129, 182, 76, 0.3);
}

.move-item.high-priority {
    background: linear-gradient(90deg, rgba(123, 97, 255, 0.12) 0%, transparent 100%);
    border-color: rgba(123, 97, 255, 0.25);
}

.move-item.low-priority {
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.6;
}

.priority-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    width: 28px;
}

.move-desc {
    flex: 1;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.move-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.move-tag svg {
    width: 12px;
    height: 12px;
}

.move-tag.capture {
    background: rgba(129, 182, 76, 0.2);
    color: #81b64c;
}

.move-tag.capture svg {
    stroke: #81b64c;
}

.move-tag.killer {
    background: rgba(123, 97, 255, 0.2);
    color: #7b61ff;
}

.move-tag.killer svg {
    stroke: #7b61ff;
}

.move-tag.reduced {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
}

.move-tag.reduced svg {
    stroke: rgba(255, 255, 255, 0.4);
}

.ordering-insight {
    margin-top: 8px;
}

.insight-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Result Graphic */
.result-graphic .result-comparison {
    display: flex;
    align-items: center;
    gap: 24px;
}

.result-before, .result-after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.result-number {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
}

.result-number.before-num {
    font-size: 15px;
    color: rgba(255, 107, 107, 0.8);
    letter-spacing: -0.03em;
}

.result-number.after-num {
    font-size: 32px;
    background: linear-gradient(135deg, #81b64c 0%, #22c55e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.result-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.result-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.result-arrow .arrow-body {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255, 107, 107, 0.5) 0%, rgba(129, 182, 76, 0.8) 100%);
    border-radius: 2px;
    position: relative;
}

.result-arrow .arrow-body::after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: #81b64c;
    font-size: 18px;
}

.techniques-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.techniques-list span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 3px 6px;
    background: rgba(123, 97, 255, 0.2);
    color: #7b61ff;
    border-radius: 4px;
    font-weight: 600;
}

.result-caption {
    margin-top: 20px;
}

.reduction-factor {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffd700 0%, #ff8e53 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Your Turn Graphic */
.your-turn-graphic .eval-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.eval-card-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-block {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.card-block.condition {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.2) 0%, rgba(123, 97, 255, 0.1) 100%);
    border: 1px solid rgba(123, 97, 255, 0.3);
    color: #a78bfa;
}

.card-block.value {
    background: linear-gradient(135deg, rgba(129, 182, 76, 0.2) 0%, rgba(129, 182, 76, 0.1) 100%);
    border: 1px solid rgba(129, 182, 76, 0.3);
    color: #81b64c;
    font-family: 'JetBrains Mono', monospace;
}

.card-arrow {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
}

.your-bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bot-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.bot-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: botBounce 2s ease-in-out infinite;
}

.bot-icon svg {
    width: 56px;
    height: 56px;
    fill: #7b61ff;
}

@keyframes botBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Stat Pill */
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(129, 182, 76, 0.1);
    border: 1px solid rgba(129, 182, 76, 0.25);
    border-radius: 20px;
    margin-top: 16px;
}

.stat-pill .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.stat-pill .stat-icon svg {
    width: 16px;
    height: 16px;
    stroke: #81b64c;
}

.stat-pill span:last-child {
    font-size: 13px;
    color: #81b64c;
    font-weight: 600;
}

/* CTA Button */
.intro-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #81b64c 0%, #629924 100%);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 20px rgba(129, 182, 76, 0.3);
}

.intro-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(129, 182, 76, 0.4);
}

.intro-cta svg {
    width: 20px;
    height: 20px;
}

/* Navigation */
.intro-nav {
    padding: 20px 48px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.intro-dots {
    display: flex;
    gap: 8px;
}

.intro-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.intro-dot:hover {
    background: rgba(255, 255, 255, 0.3);
}

.intro-dot.active {
    background: #81b64c;
    transform: scale(1.2);
}

.intro-buttons {
    display: flex;
    gap: 12px;
}

.intro-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.intro-btn svg {
    width: 18px;
    height: 18px;
}

.intro-prev {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.intro-prev:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.intro-prev:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.intro-next {
    background: linear-gradient(135deg, #7b61ff 0%, #5a3fd4 100%);
    color: #fff;
}

.intro-next:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(123, 97, 255, 0.4);
}

.intro-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Quiescence Search Graphic */
.quiescence-graphic .quiescence-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.q-scenario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.q-board {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.q-piece {
    width: 36px;
    height: 36px;
}

.q-piece.attacking {
    animation: attackPulse 1s ease-in-out infinite;
}

.q-piece.target {
    opacity: 0.7;
}

.q-arrow {
    font-size: 24px;
    color: #ff6b6b;
    animation: attackMove 0.8s ease-in-out infinite;
}

@keyframes attackPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes attackMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

.q-label {
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 12px;
}

.q-label.danger {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    font-weight: 600;
}

.q-explanation {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.q-bad, .q-good {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
}

.q-bad {
    background: rgba(255, 107, 107, 0.1);
    color: rgba(255, 107, 107, 0.7);
    text-decoration: line-through;
}

.q-good {
    background: rgba(129, 182, 76, 0.15);
    color: #81b64c;
}

.q-x {
    font-size: 16px;
    font-weight: 700;
}

.q-check {
    font-size: 16px;
    font-weight: 700;
}

/* Eval Problem Graphic */
.eval-problem-graphic .eval-problem-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.depth-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.depth-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
}

.depth-start {
    font-size: 13px;
    font-weight: 600;
    color: #81b64c;
    padding: 4px 10px;
    background: rgba(129, 182, 76, 0.2);
    border-radius: 12px;
}

.depth-dots {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 4px;
}

.depth-end {
    font-size: 13px;
    font-weight: 600;
    color: #7b61ff;
    padding: 4px 10px;
    background: rgba(123, 97, 255, 0.2);
    border-radius: 12px;
}

.depth-question {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 193, 7, 0.08) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.question-mark {
    font-size: 32px;
    font-weight: 700;
    color: #ffc107;
}

.question-text {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.eval-insight {
    text-align: center;
}

.eval-insight p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 4px 0;
}

.eval-insight strong {
    color: #81b64c;
}

/* What is Eval Graphic */
.what-eval-graphic .what-eval-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.eval-formula {
    display: flex;
    align-items: center;
    gap: 16px;
}

.formula-input {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.formula-board {
    display: flex;
    align-items: center;
    gap: 4px;
}

.formula-arrow {
    font-size: 24px;
    color: #7b61ff;
}

.formula-output {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(129, 182, 76, 0.2) 0%, rgba(129, 182, 76, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(129, 182, 76, 0.3);
}

.formula-score {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
    color: #81b64c;
}

.formula-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

.eval-components {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.eval-components .component {
    padding: 6px 12px;
    background: rgba(123, 97, 255, 0.15);
    border-radius: 16px;
    font-size: 13px;
    color: #a78bfa;
}

.eval-components .plus {
    color: rgba(255, 255, 255, 0.3);
    font-size: 16px;
}

/* History Eval Graphics */
.history-graphic .history-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 32px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.history-year {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #7b61ff;
    padding: 4px 12px;
    background: rgba(123, 97, 255, 0.2);
    border-radius: 12px;
}

.history-portrait {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    padding: 12px;
    overflow: hidden;
}

.history-portrait svg {
    width: 40px;
    height: 40px;
    stroke: rgba(255, 255, 255, 0.7);
}

/* Photo portrait style */
.history-portrait.photo {
    padding: 0;
    border: 3px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.history-portrait.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%) contrast(1.1);
    transition: filter 0.3s ease;
}

.history-portrait.photo:hover img {
    filter: grayscale(0%) contrast(1);
}

/* Turing portrait style */
.history-graphic.turing .history-portrait svg {
    stroke: #ffc107;
}

.history-graphic.turing .history-portrait.photo {
    border-color: rgba(255, 193, 7, 0.4);
}

/* Shannon portrait style */
.history-graphic.shannon .history-portrait svg {
    stroke: #34d399;
}

.history-graphic.shannon .history-portrait.photo {
    border-color: rgba(52, 211, 153, 0.4);
}

.history-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.history-eval .eval-name {
    font-size: 14px;
    color: #81b64c;
    font-weight: 600;
}

.history-features {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}

.history-features .feature {
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Turing card accent */
.history-graphic.turing .history-card {
    border-color: rgba(255, 193, 7, 0.3);
}

.history-graphic.turing .history-year {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

/* Shannon card accent */
.history-graphic.shannon .history-card {
    border-color: rgba(52, 211, 153, 0.3);
}

.history-graphic.shannon .history-year {
    background: rgba(52, 211, 153, 0.2);
    color: #34d399;
}

/* Modern Eval Timeline */
.modern-eval-graphic .modern-demo {
    display: flex;
    justify-content: center;
}

.eval-timeline {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.timeline-item.highlight {
    background: rgba(123, 97, 255, 0.1);
    border-left-color: #7b61ff;
}

.timeline-year {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    width: 50px;
}

.timeline-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    width: 80px;
}

.timeline-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.timeline-item.highlight .timeline-year {
    color: #7b61ff;
}

.timeline-item.highlight .timeline-name {
    color: #a78bfa;
}

/* Responsive */
@media (max-width: 768px) {
    .intro-modal {
        width: 95vw;
        max-height: 95vh;
        border-radius: 16px;
    }
    
    .intro-slide {
        padding: 32px 24px 24px;
    }
    
    .intro-slide h2 {
        font-size: 22px;
    }
    
    .intro-slide p {
        font-size: 14px;
    }
    
    .slide-graphic {
        height: 180px;
        transform: scale(0.85);
    }
    
    .intro-nav {
        padding: 16px 24px 24px;
        flex-direction: column;
        gap: 16px;
    }
    
    .explosion-text .big-number {
        font-size: 24px;
    }
    
    .result-number.before-num {
        font-size: 12px;
    }
    
    .result-number.after-num {
        font-size: 24px;
    }
    
    .intro-dots {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ========================================
   SITE FOOTER
   ======================================== */

.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(to top, rgba(33, 32, 29, 0.95) 0%, rgba(33, 32, 29, 0) 100%);
    font-size: 13px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 100;
}

.site-footer span {
    pointer-events: auto;
}

.heart-icon {
    width: 14px;
    height: 14px;
    color: #e25555;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}