:root {
    --board-bg: #312e2b;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- chessboard.js overrides ---- */
.board-basic {
    width: 100%;
    max-width: 640px;
}

.chessboard {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.7);
}

.chessboard .white-1e1d7 {
    background-color: #f0d9b5;
    color: #b58863;
}

.chessboard .black-3c85d {
    background-color: #b58863;
    color: #f0d9b5;
}

.chessboard .square-55d63.highlight1-32417 {
    box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.75);
}

.chessboard .square-55d63.highlight2-9c5d9 {
    box-shadow: inset 0 0 0 4px rgba(16, 185, 129, 0.45);
}

.chessboard .square-55d63.last-move {
    background-color: #f7ec8d;
}

.chessboard .square-55d63.check-square {
    box-shadow: inset 0 0 0 4px rgba(239, 68, 68, 0.9);
}

.chessboard .piece-417db {
    cursor: grab;
}

.chessboard.dragging .piece-417db {
    cursor: grabbing;
}

/* ---- clocks ---- */
.clock-box {
    transition: background-color 0.2s ease;
}

.clock-box.turn-active {
    background-color: rgba(16, 185, 129, 0.18);
    border-color: rgba(16, 185, 129, 0.6);
}

.clock-box.low-time {
    animation: pulse-danger 1s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { background-color: rgba(239, 68, 68, 0.15); }
    50% { background-color: rgba(239, 68, 68, 0.4); }
}

/* ---- move list ---- */
.move-list {
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

.move-list::-webkit-scrollbar {
    width: 6px;
}

.move-list::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

/* ---- overlays ---- */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    z-index: 10;
}

/* ---- toasts ---- */
.toast-item {
    animation: toast-in 0.25s ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- misc ---- */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}