@import url('../../../styles/base.css');            

@import url('./instruction.css');  

	body {
	    font-family: Arial, sans-serif;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            flex-direction: column;
        }

        #score {
            position: absolute;
            top: 50px;
            left: 10px;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }

        #missed {
            position: absolute;
            top: 80px;
            left: 10px;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }

        #leaderboardBtn {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }

        #restartBtn {
            position: absolute;
            top: 10px;
            right: 20%;
            transform: translateX(50%);
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color:  #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
        }

        #pauseBtn {
            position: absolute;
            top: 10px;
            left: 20%;
            transform: translateX(-50%);
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: orange;
            color: white;
            border: none;
            border-radius: 5px;
        }
        @media (max-width: 768px) {
            #leaderboardBtn, #restartBtn, #pauseBtn {
                min-width: 44px;
                min-height: 44px;
            }
        }

        #nicknameForm {
            position: absolute;
            top: 50px;
            right: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        #nicknameForm input {
            margin-bottom: 10px;
            padding: 5px;
            font-size: 16px;
        }

        #nicknameForm button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: red;
            color: white;
            border: none;
            border-radius: 5px;
        }

            @media (max-width: 600px) {

            .button-container {
                display: flex;
                flex-direction: row;
                justify-content: center;
                position: static;
                top: 0;
                width: 100%;
            }


            #leaderboardBtn, #homeBtn, #pauseBtn {
                width: 27%; 						                        /* Устанавливает ширину кнопок */
                display: flex; 						                        /* Использует Flexbox для кнопок */
                align-items: center; 					                    /* Выравнивает элементы по центру вертикально */
                justify-content: center; 					                /* Выравнивает элементы по центру горизонтально */
            }

            #nicknameForm {
                top: auto;
                bottom: 10px;
                right: 50%;
                transform: translateX(50%);
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            table {                                                         /* Стили для таблицы */
                border-collapse: collapse;                                  /* Убирает промежутки между ячейками */
                max-height: 500px;                                          /* Ограничение максимальной высоты таблицы */
                height: auto;                                               /* Устанавливаем конкретную высоту таблицы */
                width: auto;                                                /* Устанавливаем ширину таблицы на 50% от ширины родительского контейнера */
                margin: 10% auto;                                           /* Центрирует таблицу по горизонтали */
                overflow-y: scroll;                                         /* Включаем вертикальную прокрутку */
                table-layout: fixed;                                        /* Устанавливает фиксированную ширину ячеек, что улучшает визуальное восприятие т*/
                display: table;                                             /* Оставляем таблицу как таблицу, а не блочный элемент */        
            }

            th, td {                                                        /* Стили для ячеек таблицы */
                border: 1px solid #000;                                   /* Добавляем чёрную границу для ячеек */
                padding: 8px;                                               /* Добавляем отступы внутри ячеек */
                text-align: left;                                           /* Выравнивание текста по левому краю */
            }

            th {                                                            /* Стили для заголовков таблицы */
                background-color: #4CAF50;                                /* Задаём зелёный фон для заголовков */
                color: white;                                             /* Белый цвет текста для заголовков */
            }
    }