:root {
    /* Typography & Layout */
    --font-main: Arial, sans-serif;
    --font-alt: Arial, sans-serif;

    /* Text Colors */
    --text-color-main: #f0f0f0;
    --text-color-dark: #2ea4ff;
    --text-color-hover: #2ea4ff;
    --text-color-alt: #e2ac60cc;

    /* Backgrounds */
    --bg-main: #222222;
    --bg-button: linear-gradient(135deg, #333333 0%, #444444 100%);
    --bg-hover: linear-gradient(135deg, #2ea4ff 0%, #333333 100%);
    --bg-active: linear-gradient(135deg, #38ef7dcc 0%, #11998ecc 100%);
    --bg-inactive: linear-gradient(135deg, #f0f0f0 0%, #888888 100%);
    --bg-board: #2ea4ff5d;
    --bg-dropdown: linear-gradient(135deg, #232526 0%, #414345 100%);
    --bg-highlight: #2ea4ff;
    --bg-last-move: #38ef7dcc;
    --bg-right1: #fbff0080;
    --bg-right2: #cc2b5ecc;
    --bg-can-move: #2ea4ff;
    --bg-premove: #2ea4ff;

    /* Borders & Shadows */
    --border-soft: 1.5px solid #333333;
    --border-strong: 1.5px solid #2ea4ff;
    --border-muted: 1.5px solid #444444;
    --border-danger: 1.5px solid #b71c1c;
    --box-shadow-soft: 0 2px 8px #2ea4ff1a;
    --box-shadow-strong: 0 4px 12px #11998ecc;
    --box-shadow-glow: 0 0 0 3px #38ef7d77;
    --box-shadow-heavy: 0 4px 18px #333333;
    --box-shadow-error: #b71c1c 0px 0px 0px 3px;

    /* Specific Gradients */
    --grad-start: linear-gradient(135deg, #38ef7dcc, #11998ecc);
    --grad-hover: linear-gradient(135deg, #2ea4ff, #38ef7dcc);
    --grad-danger: linear-gradient(135deg, #cc2b5ecc 0%, #b71c1c 100%);
    --grad-danger-hover: linear-gradient(135deg, #ff6e40 0%, #b71c1c 100%);
    --grad-arrow-hover: linear-gradient(135deg, #444444 0%, #e2ac60cc 100%);
    --grad-selector-hover: linear-gradient(135deg, #11998ecc 0%, #333333 100%);

    /* Chessboard colors */
    --white-square: #f0d9b5;
    --black-square: #b58863;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    color: var(--text-color-main);
    text-align: center;
    margin: 4rem;
    padding: 0;
}

.login-name {
    margin-left: 1rem;
    font-size: 1rem;
    color: var(--text-color-dark);
}