/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Board Colors - Warm wood tones */
    --color-board-light: #e8d4b8;
    --color-board-dark: #b58863;

    /* Piece Colors */
    --color-piece-white: #f0f0f0;
    --color-piece-black: #1a1a1a;

    /* UI Colors - Deep blue-gray theme */
    --color-background: #1e2433;
    --color-surface: #282d3a;
    --color-surface-hover: #363c4d;
    --color-border: #3a4155;

    /* Text Colors */
    --color-text-primary: #e8eaed;
    --color-text-secondary: #9aa0a6;
    --color-text-muted: #6b7280;

    /* Board Text - High contrast */
    --color-board-text-light: #8b7355;
    --color-board-text-dark: #f5e6d3;

    /* Accent Colors */
    --color-accent: #7c9cff;
    --color-highlight: rgba(124, 156, 255, 0.4);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;

    /* Z-Index */
    --z-piece: 10;
    --z-crown: 20;
}


/* ==========================================================================
   Base Styles & Layout
   ========================================================================== */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    overflow: hidden;
}

.app-container {
    height: 100vh;
    width: 100vw;
}

.main-content {
    height: 100%;
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    gap: 0;
}


/* ==========================================================================
   Panel Components
   ========================================================================== */

.panel {
    background-color: var(--color-surface);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.panel-body {
    flex: 1;
    overflow: hidden;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* ==========================================================================
   Settings & Info Sections
   ========================================================================== */

.settings-section,
.info-section {
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}


/* ==========================================================================
   Button Styles
   ========================================================================== */

.btn-game {
    background-color: var(--color-surface-hover);
    border: none;
    color: var(--color-text-primary);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-game:hover:not(.disabled):not(:disabled) {
    background-color: var(--color-accent);
    color: #fff;
}

.btn-game.disabled,
.btn-game:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-game i {
    font-size: 0.9rem;
    opacity: 0.8;
}

.btn-game .spinner-border {
    width: 0.9rem;
    height: 0.9rem;
    border-width: 0.12em;
}

/* Icon Buttons - Minimalist */
.btn-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-hover);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

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

.btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Action Grid */
.action-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
}

/* Depth Control - Compact */
.depth-control {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.depth-control .form-range {
    flex: 1;
    min-width: 80px;
}

.depth-badge {
    background: var(--color-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
}

/* Engine Match - Compact */
.engine-match-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
}

.engine-tag {
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.engine-tag.white {
    background: var(--color-piece-white);
    color: #1a1a1a;
}

.engine-tag.black {
    background: var(--color-piece-black);
    color: #f0f0f0;
}

.engine-match-compact .vs {
    color: var(--color-text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
}

/* Turn Indicator - Compact */
.turn-compact {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.8rem;
    font-weight: 500;
}

.turn-compact .turn-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-piece-white);
    border: 1px solid var(--color-border);
}

.turn-compact.turn-black .turn-dot {
    background: var(--color-piece-black);
}


/* ==========================================================================
   Game Board Styles
   ========================================================================== */

.board-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.game-board {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    aspect-ratio: 1;
    height: min(92vh, calc(100vw - 560px));
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.3),
        0 0 0 4px var(--color-surface);
}

.side-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--color-border);
}

.side-panel:first-child {
    border-left: none;
    border-right: 1px solid var(--color-border);
}

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

.tile-text {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 700;
    pointer-events: none;
    margin: 0;
    top: 3px;
    left: 5px;
}

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

.dark-tile .tile-text {
    color: var(--color-board-text-dark);
}

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

.light-tile .tile-text {
    color: var(--color-board-text-light);
}

.highlight {
    position: relative;
}

.highlight::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 35%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-full);
}


/* ==========================================================================
   Piece Styles
   ========================================================================== */

.piece {
    position: absolute;
    width: 75%;
    height: 75%;
    border-radius: var(--radius-full);
    pointer-events: auto;
    z-index: var(--z-piece);
    transition: transform 0.08s ease;
    cursor: pointer;
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 -3px 8px rgba(0, 0, 0, 0.2),
        inset 0 3px 8px rgba(255, 255, 255, 0.1);
}

.piece:hover {
    transform: scale(1.08);
}

.piece:active {
    transform: scale(0.95);
}

.crown {
    position: absolute;
    width: 45%;
    height: 45%;
    opacity: 0.85;
    pointer-events: none;
    z-index: var(--z-crown);
}

.crown.crown-light {
    filter: invert(1);
}


/* ==========================================================================
   Turn Indicator
   ========================================================================== */

.turn-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--color-surface-hover);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
}

.turn-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.turn-white .turn-dot {
    background-color: var(--color-piece-white);
}

.turn-black .turn-dot {
    background-color: var(--color-piece-black);
}

.turn-text {
    font-size: 0.85rem;
    font-weight: 500;
}


/* ==========================================================================
   Move History
   ========================================================================== */

.move-list {
    overflow-y: auto;
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    max-height: calc(100vh - 200px);
}

.move-row {
    display: flex;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.move-row:hover {
    background-color: var(--color-surface-hover);
}

.move-row:last-child {
    background-color: var(--color-surface-hover);
}

.move-number {
    width: 24px;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.move-white,
.move-black {
    flex: 1;
    color: var(--color-text-secondary);
}

.move-white:hover,
.move-black:hover {
    color: var(--color-text-primary);
    cursor: pointer;
}


/* ==========================================================================
   Toast Notifications
   ========================================================================== */

.toast {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.85rem;
}

.toast-header {
    background-color: var(--color-surface-hover);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
}

.toast-body {
    padding: 0.5rem 0.75rem;
}


/* ==========================================================================
   Scrollbar Styles
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */

.btn-icon {
    padding: 0.5rem;
    line-height: 1;
}

.divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-sm) 0;
}


/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 200px 1fr 220px;
    }

    .game-board {
        height: min(calc(100vh - 3rem), calc(100vw - 480px));
    }
}

@media (max-width: 768px) {
    .main-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .side-panel {
        border: none;
        border-bottom: 1px solid var(--color-border);
    }

    .side-panel:last-child {
        border-bottom: none;
        border-top: 1px solid var(--color-border);
    }

    .board-area {
        padding: var(--spacing-sm);
    }

    .game-board {
        height: auto;
        width: 100%;
        max-height: 60vh;
    }

    .panel-body {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .settings-section {
        margin-bottom: 0;
    }
}

/* auto scroll to bottom */
.history-container {
    scroll-behavior: smooth;
}


/* ==========================================================================
   Engine Match Display
   ========================================================================== */

.engine-match-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--color-surface-hover);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.engine-player {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.engine-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
}

.engine-color.white-dot {
    background: var(--color-piece-white);
}

.engine-color.black-dot {
    background: var(--color-piece-black);
}

.engine-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.engine-vs {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.engine-indicator {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(124, 156, 255, 0.15);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-accent);
    margin-top: var(--spacing-sm);
}