:root {
    --clock-bg: rgba(0, 0, 0, 0.3);

    --panel-bg: #282A30;
    --input-bg: #1a1a1a;

    --gold: #ffd700;
    --gold-light: #ffed4a;

    --cyan: #00ffcc;

    --white: #FFFFFF;
    --gray: #aaa;
    --gray-light: #8B8B8B;

    --dark: #000000;
    --dark-2: #000000;

    --danger: #ff4444;
    --warning: #ffaa44;

    --blue: #2196f3;
    --green: #4caf50;
    --orange: #ff9800;
    --red: #FF2919;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    --radius-lg: 22px;
    --radius-md: 17px;
    --radius-sm: 8px;
    --radius-xs: 4px;

    --transition: all 0.2s ease;
    --transition-slow: all 0.3s ease;

    --font-main: 'ThinSans', sans-serif;
    --font-pixel: 'Minecraft', sans-serif;
}

.chess-clock-container {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-left: auto;

    padding: 4px 11px;

    background: var(--clock-bg);

    border-radius: var(--radius-lg);
}

.chess-clock-time-control,
.chess-clock-speed-control {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 4px 10px;

    background: var(--panel-bg);

    border-radius: var(--radius-md);
}

.chess-clock-speed-control {
    border-radius: var(--radius-sm);
}

.chess-clock-time-control i {
    font-size: 15px;
    color: var(--red);
}

.chess-clock-speed-control i {
    font-size: 15px;
    color: #C4C5CD;
}

.chess-clock-time-control input {
    width: 55px;

    padding: 4px;

    background: var(--input-bg);

    border: 1px solid var(--gold);
    border-radius: 10px;

    color: var(--gold);

    text-align: center;

    font-family: var(--font-main);
    font-size: 9px;
    font-weight: bold;
}

.chess-clock-time-control input:disabled,
.chess-clock-speed-control select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chess-clock-time-control span {
    font-size: 11px;
    color: var(--gray);
}

.chess-clock-speed-control select {
    padding: 4px 8px;

    background: var(--input-bg);

    border: 1.5px solid #8E8E8E;
    border-radius: var(--radius-xs);

    color: #C4C5CD;

    font-size: 11px;
    font-family: var(--font-pixel);

    cursor: pointer;
}

#chess-clock-toggle {
    padding: 6px 12px;
    transition: var(--transition-slow);
}

#chess-clock-toggle.active {
    background: var(--gold);

    border-color: #000000;

    color: var(--dark);
}

#chess-clock-toggle.active i {
    color: var(--dark);
}

.chess-clock-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 130px;

    padding: 5px 15px;

    background: var(--input-bg);
    color: #A8A8A8;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);

    box-shadow: var(--shadow);

    font-family: var(--font-main);
    font-size: 9px;
    font-weight: bold;
}

.chess-clock-display:hover {
    color: #FF0000;
}

.chess-clock-display i {
    color: var(--gold);
}

#chess-clock-time {
    color: var(--cyan);

    font-size: 12px;
    font-weight: bold;
}

#chess-clock-status {
    margin-left: 5px;

    padding: 2px 6px;

    border-radius: var(--radius-sm);

    font-size: 8px;
}

.chess-clock-status-normal {
    color: var(--gray-light);
}

.chess-clock-status-warning {
    background: var(--warning);
    color: #333;

    animation: chessClockPulse 0.8s infinite;
}

.chess-clock-status-blocked {
    color: var(--white);
}


.chess-clock-status-drawing {
    color: var(--white);
}

.chess-clock-reset-btn {
    padding: 4px 9px;
    background: var(--gold);
    border: 3px solid #000000;
    border-radius: var(--radius-xs);
    color: var(--dark);
    cursor: pointer;
    box-shadow:
        inset 0 0 0 2px var(--border-inner),
        0 2px 0 var(--border-dark);


    transition: var(--transition);
}

.chess-clock-reset-btn:hover {
    transform: scale(1.05);
    
    background: var(--gold-light);
}

.chess-clock-active {
    transition: all 0.1s ease;
}

.chess-clock-drawing {
    box-shadow: 0 0 15px rgba(255, 0, 0, 1);

    transition: box-shadow 0.05s ease;
}

.chess-clock-blocked {
    pointer-events: none;

    cursor: not-allowed !important;

    opacity: 0.6;

    filter: grayscale(0.3);
}

.chess-clock-warning {
    animation: chessClockWarning 0.5s ease-in-out infinite alternate;
}

.chess-clock-notification {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 10000;

    padding: 12px 20px;

    border-radius: var(--radius-sm);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    font-size: 14px;
    font-weight: bold;

    animation: chessClockSlideIn 0.3s ease;
}

.chess-clock-notification.info {
    background: var(--blue);
    color: var(--white);
}

.chess-clock-notification.success {
    background: var(--green);
    color: var(--white);
}

.chess-clock-notification.warning {
    background: var(--orange);
    color: var(--white);
}

.chess-clock-notification.error {
    background: var(--red);
    color: var(--white);
}

@keyframes chessClockWarning {
    from {
        color: var(--cyan);
        text-shadow: 0 0 2px var(--cyan);
    }

    to {
        color: var(--danger);
        text-shadow: 0 0 8px var(--danger);
    }
}

@keyframes chessClockPulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes chessClockFastPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

@keyframes chessClockSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {

    :root {
        --radius-lg: 12px;
        --radius-md: 14px;
        --radius-sm: 6px;
    }

    .chess-clock-container {
        flex-wrap: wrap;
        justify-content: flex-end;

        gap: 5px;

        margin-top: 4px;

        padding: 3px 6px;
    }

    .chess-clock-time-control,
    .chess-clock-speed-control {
        gap: 4px;

        padding: 2px 6px;
    }

    .chess-clock-time-control input {
        width: 38px;

        padding: 1px;

        font-size: 11px !important;
    }

    .chess-clock-time-control span,
    .chess-clock-speed-control select,
    .chess-clock-display,
    #chess-clock-time {
        font-size: 9px;
    }

    .chess-clock-speed-control select {
        padding: 4px 5px;
        font-size: 11px !important;
    }

    .chess-clock-display {
        min-width: 90px;

        gap: 5px;

        padding: 3px 8px;
    }

    #chess-clock-status {
        font-size: 6px;
    }

    #chess-clock-toggle {
        padding: 4px 7px;
    }

    #chess-clock-toggle span {
        display: none;
    }

    #chess-clock-toggle i {
        margin: 0;
    }

    .chess-clock-reset-btn {
        padding: 3px 6px;
    }

    .chess-clock-notification {
        right: 10px;
        bottom: 10px;

        padding: 8px 12px;

        font-size: 11px;
    }
}