/* Использование CSS-переменных для удобства настройки темы */
:root {
    --primary-color: #515151;       /* Основной цвет */
    --secondary-color: #f0ad4e;     /* Акцентный цвет */
    --success-color: #28a745;       /* Успех */
    --error-color: #dc3545;         /* Ошибка */
    --text-color: #333333;          /* Темно-серый текст */
    --background-color: #ededed;    /* Белый фон */
    --container-bg: #f9f9f9;        /* Фоновый цвет контейнера */
    --border-color: #cccccc;        /* Цвет границы */
    --font-family: 'Roboto', 'Open Sans', Arial, sans-serif;
    --transition-speed: 0.3s;       /* Скорость переходов */
}

/* Общие стили */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    padding: 20px;
    color: var(--text-color);
    line-height: 1.6;
}

/* Контейнер */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #333;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.container:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Абзац */
p {
    text-align: center;
    color: var(--primary-color); /* Цвет заголовка */
}

/* Заголовок */
h1 {
    text-align: center;
    color: var(--primary-color); /* Цвет заголовка */
}

h1::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 10px auto 0;
    border-radius: 2px;
}
h2 {
    font-size: 2rem;
    margin-top: 50px;
    margin-bottom: 10px;
    color: var(--primary-color);
    text-align: center;
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px auto 0;
    border-radius: 2px;
}
/* Общие стили для контейнера */
.container {
    max-width: 600px; /* Максимальная ширина контейнера */
    margin: 0 auto;     /* Центрирование контейнера */
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Фоновый цвет страницы */
}

/* Стили таблицы рейтинга */
.rating-table {
    width: 30%; /* Ширина таблицы */
    margin: 20px auto; /* Центрирование таблицы с отступами сверху и снизу */
    border-collapse: collapse; /* Удаление промежутков между ячейками */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Тень для объёма */
    background-color: #fff; /* Фоновый цвет таблицы */
    border-radius: 8px; /* Скругление углов таблицы */
    overflow: hidden; /* Обрезка элементов выходящих за пределы */
}

/* Стили заголовка таблицы */
.rating-table thead {
    background-color: var(--primary-color); /* Фон заголовка */
    color: white; /* Цвет текста заголовка */
}

.rating-table th, .rating-table td {
    padding: 12px 20px; /* Внутренние отступы ячеек */
    text-align: left;    /* Выравнивание текста по левому краю */
}

/* Стили строк таблицы */
.rating-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Чередование фона строк */
}

.rating-table tbody tr:hover {
    background-color: #d2d2d2; /* Фон при наведении курсора */
}

/* Стили заголовков таблицы */
.rating-table th {
    font-size: 1.1em; /* Размер шрифта заголовков */
    text-transform: uppercase; /* Преобразование текста в верхний регистр */
    letter-spacing: 0.05em; /* Межбуквенный интервал */
}

/* Стили для сообщений отсутствия данных */
.rating-table td[colspan="3"] {
    text-align: center; /* Центрирование текста в ячейке */
    font-style: italic; /* Курсивный стиль текста */
    color: #777; /* Цвет текста */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .rating-table {
        width: 100%; /* Ширина таблицы на мобильных устройствах */
    }

    .rating-table th, .rating-table td {
        padding: 10px 15px; /* Уменьшение отступов на мобильных устройствах */
    }
}


/* Предыдущий результат */
#previous-score {
    margin-bottom: 20px;
    font-size: 18px;
    text-align: center;
    color: #555;
}

/* Кнопки */
button {
    display: block;
    margin: 20px auto 0;
    padding: 10px 20px;
    background-color: var(--primary-color); /* Цвет кнопки */
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--text-color);
}

button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#restart-button {
    background-color: var(--secondary-color);
}

#restart-button:hover {
    background-color: #d88c36; /* Более темный оттенок акцентного цвета */
}

#restart-button:active {
    transform: scale(0.98);
}

/* Область тестирования */
#test-area {
    display: none;
    margin-top: 20px;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Подсвеченный код */
.code-overlay-container pre {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 12px 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    width: 100%;
    height: 200px; /* Регулируйте по необходимости */
    overflow: auto;
    pointer-events: none; /* Позволяет взаимодействовать с textarea */
    background-color: #1e1e1e;
    color: #f8f8f2;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Стиль для отображаемого текста кода */
#text-to-type {
    font-family: 'Courier New', Courier, monospace;
    padding: 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    white-space: pre-wrap; /* Сохранение переносов строк */
    font-size: 18px;
    overflow: auto;
    border: 1px solid #444; /* Граница для лучшего визуального разделения */
    background-color: #2d2d2d; /* Темный фон для кода, если тема Prism.js не покрывает */
}

/* Стиль для поля ввода */
#input-area {
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    padding: 12px 15px;
    font-size: 18px;
    border: 5px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #2d2d2d;
    color: #f8f8f2;
}
/* Стиль для правильного ввода */
#input-area.correct {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

/* Стиль для ошибки ввода */
#input-area.incorrect {
    border-color: #f44336;
    box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
}


/* Скорость печати */
#wpm {
    margin-top: 20px;
    font-size: 18px;
    text-align: center;
    color: var(--primary-color);
}

/* Сообщение о завершении */
#completion-message {
    display: none;
    font-size: 20px;
    margin-top: 20px;
    color: var(--success-color);
    text-align: center;
    animation: fadeIn 0.5s ease forwards;
}

/* Адаптивность */
@media (max-width: 600px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 1.5rem;
    }

    #text-to-type {
        font-size: 18px;
    }

    #input-area {
        font-size: 16px;
        padding: 10px 12px;
    }

    button {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
    }

    #previous-score, #wpm {
        font-size: 16px;
    }

    #completion-message {
        font-size: 18px;
    }
}