/* =============================================
   CHESS - WARM WOODEN CLUB DESIGN
   ============================================= */

:root {
    --board-size: min(70vh, 75vw, 560px);
    --square-size: calc(var(--board-size) / 8);
    --light-square: #d4a574;
    --dark-square: #8b5a2b;
    --selected-square: #e6c496;
    --move-indicator: rgba(197, 160, 89, 0.7);
    --capture-indicator: rgba(180, 70, 70, 0.8);
    --gold: #c5a059;
    --gold-light: #d4a574;
    --wood-dark: #2a1810;
    --wood-medium: #3d2817;
}

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

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

body {
    font-family: 'Cinzel', 'Georgia', serif;
    background: #1a1512;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* === SUBTLE CHECKERED PATTERN (matches playground) === */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        /* Warm golden glows */
        radial-gradient(ellipse at 50% 60%, rgba(197, 160, 89, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 30% 30%, rgba(197, 160, 89, 0.08) 0%, transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(255, 220, 150, 0.05) 0%, transparent 25%),
        /* Subtle checkered pattern */
        conic-gradient(from 0deg at 50% 50%,
            rgba(40, 30, 20, 0.25) 90deg,
            rgba(20, 15, 10, 0.2) 90deg 180deg,
            rgba(40, 30, 20, 0.25) 180deg 270deg,
            rgba(20, 15, 10, 0.2) 270deg);
    background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px;
    animation: subtleGlow 10s ease-in-out infinite alternate;
    pointer-events: none;
    opacity: 0.7;
}

@keyframes subtleGlow {
    0% {
        filter: brightness(0.9);
    }

    100% {
        filter: brightness(1.1);
    }
}

/* Soft vignette */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}



/* === CHESS WRAPPER === */
.chess-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.board-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === FILE & RANK LABELS === */
.file-labels,
.rank-labels {
    display: flex;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    letter-spacing: 2px;
    user-select: none;
}

.file-labels {
    display: grid;
    grid-template-columns: repeat(8, var(--square-size));
    width: var(--board-size);
}

.file-labels span {
    text-align: center;
}

.rank-labels {
    flex-direction: column;
    height: var(--board-size);
    justify-content: space-around;
}

.rank-labels span {
    height: var(--square-size);
    display: flex;
    align-items: center;
}

.rank-labels.right {
    opacity: 0;
}

/* === THE BOARD === */
#chess-board {
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 0 0 4px var(--wood-medium),
        0 0 0 8px var(--gold),
        0 0 0 12px var(--wood-dark),
        0 0 40px rgba(197, 160, 89, 0.15),
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.4);
    position: relative;
}

/* Subtle vignette on board */
#chess-board::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    border-radius: 2px;
}

/* === SQUARES === */
.square {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: filter 0.15s ease;
}

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

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

.square:hover {
    filter: brightness(1.1);
}

.square.selected {
    background-color: var(--selected-square) !important;
}

.square.check {
    background: linear-gradient(135deg, #c53030 0%, #9b2c2c 100%) !important;
    animation: checkGlow 1.2s ease-in-out infinite alternate;
}

@keyframes checkGlow {
    from {
        box-shadow: inset 0 0 20px rgba(197, 48, 48, 0.5);
    }

    to {
        box-shadow: inset 0 0 30px rgba(197, 48, 48, 0.8), 0 0 20px rgba(197, 48, 48, 0.4);
    }
}

/* === PIECES === */
.piece {
    width: 80%;
    height: 80%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.4));
    transition: transform 0.1s ease;
}

.square:active .piece {
    transform: scale(0.9);
}

/* === MOVE INDICATORS === */
.move-indicator {
    width: 28%;
    height: 28%;
    background: var(--move-indicator);
    border-radius: 50%;
    position: absolute;
    pointer-events: none;
}

.capture-indicator {
    position: absolute;
    inset: 6%;
    border: 4px solid var(--capture-indicator);
    border-radius: 50%;
    pointer-events: none;
}

/* === TURN INDICATOR - Subtle bottom text === */
#game-info {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

#turn-indicator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

#turn-indicator[data-turn="white"] {
    color: rgba(255, 255, 255, 0.5);
}

#turn-indicator[data-turn="black"] {
    color: rgba(100, 100, 100, 0.6);
}

/* === RESET BUTTON - Prominent === */
#reset-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold) 0%, #b8962e 100%);
    border: none;
    border-radius: 8px;
    color: var(--wood-dark);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.3);
    z-index: 100;
}

#reset-btn:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow: 0 6px 28px rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
}

#reset-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.3);
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
    :root {
        --board-size: min(90vw, 90vh);
    }

    .floating-nav {
        top: 12px;
        gap: 20px;
    }

    .nav-link {
        font-size: 0.7rem;
    }

    .rank-labels,
    .file-labels.bottom {
        display: none;
    }

    .file-labels {
        font-size: 0.6rem;
    }

    #turn-indicator {
        font-size: 0.6rem;
    }

    #reset-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
        bottom: 16px;
        right: 16px;
    }
}

@media (max-height: 500px) {
    .floating-nav {
        display: none;
    }

    .file-labels,
    .rank-labels {
        display: none;
    }
}