/* 1. BASE LAYOUT & BOARD */
body { 
    background-color: #161512; 
    color: #bababa;
    display: flex; 
    justify-content: center; 
    align-items: flex-start;
    padding-top: 30px; 
    font-family: 'Aptos', 'Segoe UI', system-ui, sans-serif;
    margin: 0;
}

#my-board { 
    width: 600px; 
    height: 600px; 
    margin-right: 35px;  
    margin-bottom: 30px; 
}

.blue-board cg-board {
    background-color: #dee3e6;
    background-image: conic-gradient(#8ca2ad 90deg, transparent 90deg 180deg, #8ca2ad 180deg 270deg, transparent 270deg);
    background-size: 25% 25%;
}

/* OUTSIDE COORDINATES */
.cg-wrap coords {
    position: absolute;
    display: flex;
    pointer-events: none;
    font-size: 14px;
    font-weight: bold;
    color: #8ca2ad !important;
    z-index: 10;
}
.cg-wrap coords coord { text-transform: lowercase; }

.cg-wrap coords.ranks {
    left: auto !important; 
    right: -25px !important; 
    top: 0;
    flex-direction: column-reverse; 
    width: 25px; 
    height: 100%;
}
.cg-wrap coords.ranks coord {
    flex: 1;
    display: flex;
    align-items: center !important; 
    justify-content: center !important; 
    padding: 0 !important; 
    transform: none !important;
}

.cg-wrap coords.files {
    bottom: -25px !important; 
    top: auto !important;
    left: 0;
    flex-direction: row;
    width: 100%;
    height: 25px; 
}
.cg-wrap coords.files coord {
    flex: 1;
    display: flex;
    align-items: center !important; 
    justify-content: center !important; 
    padding: 0 !important; 
}

/* PIECES & MOVE INDICATORS */
cg-board square.move-dest { background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0) 24%); pointer-events: auto; }
cg-board square.oc.move-dest { background: radial-gradient(transparent 0%, transparent 78%, rgba(20, 85, 30, 0.5) 80%); }

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

/* 2. LICHESS SIDEBAR CLONE */
#sidebar {
    width: 350px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: #262421;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    overflow: hidden;
}

#engine-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #2a2825;
    border-bottom: 1px solid #363431;
    font-size: 12px;
    color: #8ca2ad;
}
#engine-name { color: #629924; font-weight: bold; }
#engine-eval { font-weight: bold; color: #d5a448; font-size: 15px; }

#lichess-moves {
    flex-grow: 1; 
    display: grid;
    grid-template-columns: 45px 1fr 1fr;
    align-content: start;
    overflow-y: auto;
    background: #262421;
}
.move-index { background: #302e2c; color: #62605d; padding: 4px 8px; text-align: right; border-right: 1px solid #262421; user-select: none; font-size: 13px; }
.move-san { padding: 4px 10px; color: #bababa; cursor: pointer; font-size: 14px; }
.move-san:hover { background: #363431; }
.move-san.active { background: #205c8f; color: #fff; font-weight: bold; }

#explorer-box { height: 220px; background: #201e1b; display: flex; flex-direction: column; }
.explorer-header { background: #4d7331; color: #fff; padding: 6px 10px; font-size: 12px; font-weight: bold; display: flex; align-items: center; }
.explorer-sub-header { background: #302e2c; color: #8ca2ad; font-size: 10px; padding: 4px 10px; display: flex; border-bottom: 1px solid #262421; }
.explorer-content { overflow-y: auto; }

.exp-row { display: flex; align-items: center; border-bottom: 1px solid #262421; font-size: 12px; padding: 4px 0; transition: background 0.1s; }
.exp-row:hover { background: #363431; }
.exp-move { width: 45px; padding-left: 10px; font-weight: bold; color: #ececec; }
.exp-games { width: 60px; color: #62605d; text-align: right; padding-right: 8px; }
.exp-bars { flex-grow: 1; padding-right: 10px; display: flex; align-items: center; }

.bar-container { display: flex; width: 100%; height: 12px; border-radius: 2px; overflow: hidden; font-size: 9px; line-height: 12px; text-align: center; color: #fff; }
.bar-w { background: #e0e0e0; color: #2b2b2b; }
.bar-d { background: #7b7a78; }
.bar-b { background: #363534; }

.buttons { display: flex; background: #1e1e1e; padding: 8px; gap: 8px; }
.btn { flex: 1; padding: 6px; border: none; border-radius: 3px; font-size: 12px; font-weight: bold; cursor: pointer; color: white; }
#save-btn { background-color: #3692e7; }
#restart-btn { background-color: #383634; }