body {
    font-family: 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif, sans-serif;
    display: flex;
    justify-content: center;
    margin: 0;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    width: auto;
}

.table-div {
    display: flex;
    flex-direction: column;
    text-align: center;
    word-wrap: break-all;
    z-index: 2;
    max-height: 400px;   /* ограничиваем высоту */
    overflow-y: auto;    /* вертикальный скролл */
    overflow-x: hidden;  /* убираем горизонтальный */
    padding: 20px;  /* чтобы скролл не налезал на текст */
    width: 700px;
    border-radius: 10px;
    gap: 10px;
}

.description-row {
    font-size: 10px;
    color: #0000008e;
    text-align: left;
    display: flex;
    flex-direction: row;
    word-wrap: break-all;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.nick-label {
    width: 60%;
}

.per-cent-label {
    width: 25%;
}

.rounds-label {
    width: 20%;
}

.player-row-place {
    color: #ffffff81;
}

.second-player-row-place {
    color: #0000003d;
}

.other-player-row-place {
    color: #0000003d;
}

.others-player-nick-div, .others-second-player-nick-div {
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    width: 60%;
    gap: 10px;
}

.others-player-wins-div, .others-second-player-wins-div {
    text-align: left;
    width: 25%;
}

.others-player-rounds-div, .others-second-player-rounds-div {
    text-align: left;
    width: 20%;
}

.other-nicks-div {
    display: flex;
    flex-direction: row;
    color: #000000b2;
    text-align: left;
    align-items: center;
    width: 60%;
    gap: 10px;
}

.player-row-first-place {
    width: 20px;
    height: 20px;
}

.other-rounds-div {
    color: #000000b2;
    text-align: left;
    width: 20%;
}


.other-wins-div {
    color: #000000b2;
    text-align: left;
    width: 25%;
}


.player-row {
    display: flex;
    flex-direction: row;
    word-wrap: break-all;
    background-color: #a4c3b2;
    color: #ffffff;
    width: auto;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform 0.3s ease;
}

.player-row:hover {
    background-color: #b1d3c0;
}

.second-player-row {
    display: flex;
    flex-direction: row;
    word-wrap: break-all;
    background-color: #00000013;
    color: #464646;
    width: auto;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform 0.3s ease;
}

.second-player-row:hover {
    background-color: #0000000e
}

.other-player-row {
    display: flex;
    flex-direction: row;
    word-wrap: break-all;
    background-color: #7e7e7e0c;
    width: auto;
    border-radius: 15px;
    padding-left: 20px;
    padding-right: 20px;
    transition: transform 0.3s ease;
}

.other-player-row:hover {
    background-color: #7e7e7e05
}

.show-others-back-button {
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    width: 30%;
    padding: 10px;
    margin-top: 20px;
    transition: all 0.3s ease;
}

.show-others-back-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.background-image {
    position: absolute;
    height: 900px;
    opacity: 0.2;
    border-radius: 20px;
}

.main-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 20px;
    background-color: #ffffff;
}

.header-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    word-wrap: break-all;
    width: 100%;
    z-index: 2;
}

.tictactoe-title {
    font-size: 34px;
    margin-bottom: 10px;
    color: #a4c3b2;
    border-radius: 10px;
}

.tictactoe-subtitle {
    width: 360px;
    font-size: 20px;
    margin-top: 0px;
    color: #00000048;
}

.flex-container {
    height: auto;
    width: auto;
    display: flex;
    justify-content: space-between; /* распределяет элементы по краям */
    align-items: center; /* выравнивание по вертикали */
}

.results-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}

.sign-left {
    cursor: default;
    left: 42%;
    position: absolute;
    z-index: 0;
    display: flex;
    font-size: 300px;
    color: #00000010;
    transition: transform 0.4s ease;
}

.sign-left:hover {
    transform: translateX(-30px);
    color: #00000015;
}

.sign-right {
    cursor: default;
    right: 42%;
    position: absolute;
    z-index: 0;
    display: flex;
    font-size: 300px;
    color: #00000010;
    transition: transform 0.4s ease;
}

.sign-right:hover {
    transform: translateX(30px);
    color: #00000015;
}

.tictactoe-container {
    position: relative; /* или absolute */
    margin: 0;
    z-index: 2;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 70px rgba(0, 0, 0, 0.103);
    text-align: center;
    width: auto;
    height: auto;
}

.inputField {
    background-color: #ffffff;
    color: #000000;
    font-size: 15px;
    padding: 20px 0px;
    width: 200px;
    height: 20px;
    outline: none;
    text-align: center;
    margin-top: 30px;
    border-radius: 10px;
    border-width: 1px;
    border-color: #0000003a;
    transition: transform 0.5s ease;
}

.inputField:hover {
    background-color: #f3f3f3;
    border-width: 0px;
    transform: scale(1.01);
}

.menu-write-nickname {
    margin-bottom: 0px;
    margin-top: 0px;
}

.nickname-submit-button {
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    width: 50%;
    height: 30px;
    margin-top: 30px;
    transition: all 0.3s ease;
}

.nickname-submit-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.instruction-ok-button {
    width: 200px;
    height: 40px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.instruction-ok-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.danger-img {
    height: 60px;
    opacity: 0.2;
}

.instruction-text {
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.choose-side-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 3px;
}

.x-button-menu {
    width: 200px;
    height: 200px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 90px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.x-button-menu:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.o-button-menu {
    width: 200px;
    height: 200px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 90px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.o-button-menu:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.menu-choose-level {
    margin-bottom: 0px;
}

.choose-level-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 420px;
    height: auto;
    gap: 10px;
}

.choose-level-button {
    width: 200px;
    height: 70px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.choose-level-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.menu-choose-format {
    margin-bottom: 30px;
}

.choose-format-button-row  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 420px;
    height: auto;
    gap: 10px;
}

.choose-format-button {
    width: 200px;
    height: 70px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.choose-format-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.progress-container {
    margin-top: 50px;
    margin-bottom: 30px;
    width: 50%;
    height: 10px;
    background-color: #eeeeee;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 100%;
    background-color: #a4c3b2;
    transition: width 1s linear;
}

.tictactoe-button {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    border-color: #0000000e;
    font-size: 60px;
    text-align: center;
    color: #a4c3b2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tictactoe-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.096);
    transform: translateY(-2px) scale(1.05); 
}

.footer-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    text-align: center;
}

.footer-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 400px;
    margin-bottom: 0px;
    background-color: #ffffff;
}

.round-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-top: 30px;
    color: #000000;
    gap: 25px;
    border-radius: 10px;
    width: 70%;
    background-color: #00000004;
}

.footer-stats-round-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: 5px;
}

.footer-stats-level-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: 5px;
}

.footer-round-text {
    color: #00000027;
}

.footer-level-text {
    color: #00000027;
}

.footer-round-count {
    font-size: 19px;
    color: #00000042;
}

.footer-level-shown {
    font-size: 19px;
    color: #00000042;
}

.game-over-line {
    border: 5px;
    border-top: 0.5px solid #0000002a;
    width: 250px;
}

.stop-game-button-row {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffffff;
    width: 200px;
    height: 200px;
    gap: 10px;
}

.next-round-button {
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    width: 90%;
    height: 20%;
    transition: all 0.3s ease;
}

.next-round-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.change-level-button {
    background-color: #ffffff;
    border-radius: 12px;
    border-color: #00000000;
    font-size: 15px;
    color: #a4c3b2;
    cursor: pointer;
    width: 90%;
    height: 20%;
    transition: all 0.3s ease;
}

.change-level-button:hover {
    background-color: #ececec;
    color: #525252;
}

.see-results-button {
    background-color: #ffffff;
    border-radius: 12px;
    border-color: #00000000;
    font-size: 15px;
    color: #a4c3b2;
    cursor: pointer;
    width: 90%;
    height: 20%;
    transition: all 0.3s ease;
}

.see-results-button:hover {
    background-color: #ececec;
    color: #525252;
}

.menu-button {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border-radius: 12px;
    border-color: #00000000;
    font-size: 15px;
    color: #a4c3b2;
    cursor: pointer;
    width: 90%;
    height: 20%;
    transition: all 0.3s ease;
    gap: 10px;
}

.menu-button:hover {
    background-color: #ececec;
    color: #525252;
}

.menu-button-arrow {
    background-color: #ffffff;
    opacity: 0.5;
    height: 20px;
}

.go-text {
    color: #63756b;
}

.title-result {
    margin-top: 20px;
    margin-bottom: 5px;
    font-size: 40px;
    color: #a4c3b2;
}

.stats-header-div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    margin-top: 20px;
    width: auto;
    flex-direction: row;
}

.stats-title-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-title {
    font-size: 20px;
    color: #00000028;
    margin-bottom: 0px;
    margin-top: 20px;
}

.stats-nick {
    font-size: 35px;
    color: #000000a6;
    margin-bottom: 0px;
    margin-top: 0px;
}

.stats-div {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 60px;
    width: 380px;
}

.stats-per-cent {
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 0px;
    margin-top: 45px;
    font-size: 80px;
    color: #a4c3b2;
    transition: all 0.3s ease;
    background-color: #a4c3b22c;
}

.stats-rounds {
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 0px;
    margin-top: 45px;
    font-size: 80px;
    color: #a4c3b2;
    transition: all 0.3s ease;
    background-color: #a4c3b22c;
}

.stats-round-subtitle {
    margin-top: 15px;
}

.stats-per-cent-subtitle {
    margin-top: 15px;
}

.show-other-players-button {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #a4c3b2;
    cursor: pointer;
    width: 50%;
    height: 40px;
    transition: all 0.3s ease;
}

.show-other-players-button:hover {
    background-color: #ececec;
    color: #525252;
}

.results-header-line {
    margin-top: 10px;
    border: 5px;
    border-top: 0.5px solid #0000002a;
    width: 50%;
}

.results-gif {
    width: 240px;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.103);
}

.right-info-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
    margin-right: 30px;
}

/* -------------------------------------------------------------------------------------------- */

.left-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20px;
    gap: 20px;
}

.middle-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    margin-right: 20px;
    gap: 20px;
}

.left-box, .middle-box-1, .middle-box-2, .right-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.103);
    text-align: center;
    width: auto;
    height: auto;
    transition: all 0.2s ease;
}

.left-box-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: #ffffff;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.103);
    text-align: center;
    width: 302px;
    height: 155px;
    transition: all 0.2s ease;
}

.choose-level-tutorial-icon {
    position: absolute;
    opacity: 0.15;
    cursor: pointer;
    width: 30px;
    transform: translateX(190px);
    transition: all 0.3s ease;
}

.switch-game-tutorial-icon {
    position: absolute;
    opacity: 0.15;
    cursor: pointer;
    width: 30px;
    transform: translateX(85px);
    transition: all 0.3s ease;
}

.switch-game-tutorial-icon:hover, .choose-level-tutorial-icon:hover {
    opacity: 0.4;
}

.choose-mode-text-div {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.choose-level-text-div {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px
}

.left-box:hover, .left-box-2:hover, .middle-box-1:hover, 
.middle-box-2:hover, .right-box:hover {
    transform: scale(1.02); 
}

.input-menu {
    background-color: #ffffff;
    color: #000000;
    font-size: 15px;
    padding: 20px 0px;
    width: 300px;
    height: 5px;
    outline: none;
    text-align: center;
    border-radius: 10px;
    border-width: 1px;
    border-color: #0000003a;
    transition: transform 0.3s ease;
}

.input-menu:hover {
    background-color: #f3f3f3;
    border-width: 0px;
    transform: scale(1.05);
}

.choose-ai-nick {
    margin-top: 0px;
}

.ai-nickname-submit-button {
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffff;
    cursor: pointer;
    width: 50%;
    height: 50px;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.ai-nickname-submit-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.two-players-button, .ai-button {
    width: 200px;
    height: 150px;
    background-color: #a4c3b2;
    border-radius: 20px;
    border-color: #0000000e;
    font-size: 17px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.two-players-button:hover, .ai-easy-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.ai-easy-button, .ai-hard-button, .ai-minimax-button, 
.ai-limited-minimax-button, .ai-monte-carlo-button {
    width: 200px;
    height: 70px;
    background-color: #a4c3b2;
    border-radius: 20px;
    border-color: #0000000e;
    font-size: 17px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.ai-button-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    width: auto;
    background-color: #ffffff;
    border-radius: 20px;
    z-index: 999;
    position: absolute;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.103);
    gap: 5px;
    right: 200px;
}

.ai-easy-button:hover, .ai-hard-button:hover, .ai-minimax-button:hover, 
.ai-limited-minimax-button:hover, .ai-monte-carlo-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.three-to-three-button, .four-to-four-button, 
.five-to-five-button, .seven-to-seven-button {
    width: 90px;
    height: 90px;
    background-color: #a4c3b2;
    border-radius: 15px;
    border-color: #0000000e;
    font-size: 20px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.three-to-three-button:hover, .four-to-four-button:hover, 
.five-to-five-button:hover, .seven-to-seven-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.o-button, .x-button {
    width: 150px;
    height: 150px;
    background-color: #a4c3b2;
    border-radius: 20px;
    border-color: #0000000e;
    font-size: 90px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.o-button:hover, .x-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.choose-rounds-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 10px;
}

.quick-game-button, .long-game-button, 
.infinite-game-button {
    width: 200px;
    height: 70px;
    background-color: #a4c3b2;
    border-radius: 20px;
    border-color: #0000000e;
    font-size: 17px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.quick-game-button:hover, .long-game-button:hover, 
.infinite-game-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.two-players-button:hover, .ai-easy-button:hover, 
.ai-hard-button:hover, .ai-impossible-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.switch-game-mode-button-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    gap: 10px;
}

.choose-rounds {
    margin-bottom: 30px;
}



.yes-button, .no-button {
    width: 95px;
    height: 55px;
    background-color: #a4c3b2;
    border-radius: 20px;
    border-color: #0000000e;
    font-size: 17px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.yes-button:hover, .no-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.submit-all-button {
    width: 230px;
    height: 60px;
    background-color: #a4c3b2;
    border-radius: 15px;
    border-color: #0000000e;
    font-size: 20px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 20px;
    margin-right: 10px;
}

.submit-all-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.back-to-menu-button {
    width: 150px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 15px;
    border-color: #0000000e;
    font-size: 20px;
    color: #777777b2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.back-to-menu-button:hover {
    background-color: #a4c3b2;
    color: #ffffffb2;
}

.footer-button-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.error-message {
    margin-top: 20px;
    color: rgb(185, 96, 96);
}

.input-field-error-message{
    margin-bottom: 0px;
    margin-top: 5px;
    color: rgb(185, 96, 96);
}

.added-img {
    width: 50px;
}

.header-sides {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}

.round-stats {
    color: #00000049;
    font-weight: 600;
    font-size: 25px;
}

.player-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    background-color: #a4c3b2;
    color: rgb(255, 255, 255);
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.second-player-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.082);
}

.help-title {
    margin-bottom: 0px;
    color: #a4c3b2;
}

.help-subtitle {
    width: 400px;
    color: #0000006c;
}

.help-description {
    padding: 15px;
    border-radius: 10px;
    background-color: #00000007;
    color: #0000006e;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 350px;
    transition: all 0.1s ease;
}

.help-description:hover {
    background-color: #00000004;
}

/* сам список */
.level-info-ai-list {
    list-style: none; /* убираем стандартные маркеры */
    padding: 0;
    width: 470px;
}

/* каждый пункт списка */
.level-info-li {
    display: flex;                /* размещаем иконку и текст в ряд */
    align-items: flex-start;      /* выравниваем верх текста и иконки */
    padding: 15px;
    border-radius: 10px;
    background-color: #00000007;
    text-align: left;
    margin-bottom: 15px;
    transition: all 0.1s ease;
}

.level-info-li:hover {
    background-color: #00000004;
}

/* иконка */
.level-info-li::before {
    content: "";
    flex-shrink: 0;               /* чтобы иконка не сжималась */
    width: 15px;                  /* размер иконки */
    height: 15px;
    background: url('images/checkmark.png') no-repeat center/contain;
    margin-top: 4px;              /* немного смещаем вниз для выравнивания */
    margin-right: 10px;
}

/* заголовок */
.level-info-li-title {
    margin: 0 0 5px;
    color: #00000096;
}

/* подзаголовок / описание */
.level-info-li-subtitle {
    margin: 0;
    color: #0000006e;
}

/* разделительная линия */
.level-info-line {
    border: none;
    border-top: 0.5px solid #00000028;
    width: 100%;
    margin-top: 10px;
}

.help-back-button {
    width: 150px;
    height: 50px;
    background-color: #a4c3b2;
    border-radius: 12px;
    border-color: #0000000e;
    font-size: 15px;
    color: #ffffffb2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.help-back-button:hover {
    background-color: rgb(255, 255, 255);
    color: #a4c3b2;
}

.player-avatar-div, .second-player-avatar-div {
    gap: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.player-go-mark, .second-player-go-mark {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.103);
    transition: all 0.5s ease;
}

.timer-text {
    padding: 20px;
}

.timer-div {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(0, 0, 0, 0.103);
    color: #0000003b;
    border-radius: 20px;
    width: auto;
    height: 30px;
    margin-bottom: 10px;
    font-weight: 600;
}

.toggle-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.3;
    width: 100px;
    border-radius: 15px;
}

.toggle-div:hover {
    transform: scale(1.02); 
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.103);
    opacity: 1.0;
}

.toggle-container {
    margin-top: 20px;
    position: relative;
    width: 50px;
    height: 26px;
    background: #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transition: left 0.3s;
}

.active {
    background: #97e7bb;
}

.active .toggle-switch {
    left: 26px;
}

.toggle-text {
    color: #00000057;
}

.middle-info-container {
    background-color: #ffffff;
    justify-content: center;
    text-align: center;
    height: 500px;
    border-radius: 50px;
    margin-right: 30px;
    border: 10px solid #0000000d;
}

.left-info-container {
    background-color: #ffffff;
    justify-content: center;
    text-align: center;
    height: 500px;
    border-radius: 50px;
    border: 10px solid #0000000d;
}

.change-language-div {
    display: flex;
    gap: 1px;
}

.change-language-rus, .change-language-de, 
.change-language-en {
    width: 70px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 15px;
    border-color: #0000000e;
    font-size: 20px;
    color: #777777b2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.change-language-rus:hover, .change-language-de:hover, 
.change-language-en:hover {
    background-color: #a4c3b2;
    color: #ececec;
}

.write-nickname-footer-buttons-div {
    display: flex;
    z-index: 100;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 20px;
    background-color: #f7f7f7;
}

.change-volume-div {
    margin-top: 5px;
}

.sound-off-button, .sound-on-button {
    width: 105px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 15px;
    border-color: #0000000e;
    font-size: 20px;
    color: #777777b2;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.player-title {
    margin: 0px;
    font-size: 50px;
    color: #00000012;
}

.results-crown {
    width: 40px;
}