* {
    box-sizing: border-box;
    transition: 0.4s ease all;
    margin: 0;
}
a{
    text-decoration: none;
}
a:hover {
    opacity: 0.8;
}
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    line-height: 1.4;
    background: #113C44;
    color: white;
    font-size: 14px;
}

h1, h2, h3, h4 {
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFD700;
}
h3{
    font-size: 23px;
}
p{
    font-weight: 300;

}

h1{
    font-size: 45px;
    margin-top: 0;
}
h2{
    font-size: 35px;
    text-transform: uppercase;
    text-align: center;
}
h3{
    padding-bottom: 30px;
}

img{
    display: block;
    width: 100%;
    height: auto;
}
.container {
    max-width: 1000px;
    margin: auto;
    padding: 0 10px;
}

.navbar input[type="checkbox"],
.navbar .hamburger-lines {
    display: none;
}

.navbar {
    position: absolute;
    top: 0;
    width: 100%;
    color: white;
    z-index: 100;
    padding: 20px 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;
}

.menu-items {
    order: 2;
    display: flex;
    gap: 52px;
}

.logo {
    order: 1;
}
.logo{
    max-width: 180px;
}

.menu-items li {
    list-style: none;
    font-size: 18px;
    text-transform: uppercase;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease-in-out;
}

.navbar a:hover {
    opacity: 0.7;
    transition: 1s;
}

.button {
    display: inline-block;
    padding: 10px 40px;
    font-weight: bold;
    background: #FFD700;
    color: black;
    margin-top: 30px;
    border-radius: 5px;
}

.col-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 30px 0;
}
.col{
    width: 48%;
}
.col-100{
width:100%;
}
.img-col{
    width: 48%;
}
.img-col img{
    border-radius: 10px;
}
.col p:not(:last-child), .contact-wrapper p:not(:last-child){
    padding-bottom: 15px;
}
.age{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #77C7CE;
    color: black;
}
.age-cont, .header-cont{
    width: 60%;
    max-width: 800px;
}
.age-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 90%;
    padding: 30px 50px;
    border-radius: 15px;
    color: black;
}
.age-cont p{
    display: block;
    width: 87%;
}
.age-cont svg{
    display: block;
    width: 10%;
}
.footer-age{
    background: #FFD700;
    color:black;
}

.footer-logo{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #FFD700;
    margin-bottom: 20px;
}
.footer-logo-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.footer-logo-wrapper img{
    max-height: 50px;
    width: auto;
}
.footer-logo-wrapper a{
    display: block;
}
.footer-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 30px;
}
.footer-links-wrapper{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.footer-links-wrapper a{
    color: white;
    text-decoration: none;
}


@media screen and (max-width: 1200px) {
    .menu-items li {
        font-size: 15px;
    }

    .menu-items {
        gap: 25px;
    }

    .logo img {
        max-width: 200px;
    }

    .navbar {
        padding: 8px 0;
    }
}


/*nav*/
@media (max-width: 830px) {
    .footer-logo-wrapper{
        flex-wrap: wrap;
        justify-content: center;
    }
    h2{
        font-size: 25px;
    }
    header{
        padding-bottom: 60px;
    }
    .logo img {
        max-width: 150px;
    }

    .navbar {
        opacity: 0.95;
        padding: 0;
    }

    .navbar-container input[type="checkbox"],
    .navbar-container .hamburger-lines {
        display: block;
    }

    .navbar-container {
        display: block;
        position: relative;
        padding: 3px 0;
        height: 64px;
    }

    .navbar-container input[type="checkbox"] {
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .navbar-container .hamburger-lines {
        height: 28px;
        width: 35px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 20px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .navbar-container .hamburger-lines .line {
        display: block;
        height: 2px;
        width: 100%;
        border-radius: 10px;
        background: #ffffff;
    }

    .navbar-container .hamburger-lines .line1 {
        transform-origin: 0 0;
        transition: transform 0.3s ease-in-out;
    }

    .navbar-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
    }

    .navbar-container .hamburger-lines .line3 {
        transform-origin: 0 100%;
        transition: transform 0.3s ease-in-out;
    }

    .navbar .menu-items {
        padding-top: 100px;
        background: #113C44;
        height: calc(100vh + 10px);
        max-width: 300px;
        transform: translate(-150%);
        display: flex;
        flex-direction: column;
        margin: -10px 0 0 -40px;
        padding-left: 60px;
        transition: transform 0.5s ease-in-out;
        box-shadow: 5px 0 10px 0 #0b272c;
        overflow: scroll;
    }

    .navbar .menu-items li {
        margin-bottom: 1.8rem;
        font-size: 1.1rem;
        font-weight: 500;
    }

    .logo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
    }

    .navbar-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(45deg);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
    }

    .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-45deg);
    }

}


@media (max-width: 500px) {
    .navbar-container input[type="checkbox"]:checked ~ .logo {
        display: none;
    }
    #feedback {
        padding: 0 20px 71px;
    }
}
h1{
    padding-bottom: 20px;
}
h2{
    padding-bottom: 40px;
}
.header{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background: url("../img/header-bg.webp") no-repeat center center fixed;
    background-size: cover;
    padding: 100px 0;
}
.header-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: white;
}
.main-button{
    margin: 20px;
    padding: 10px 50px;
    border-radius: 30px;
    color: black;
    font-weight: 500;
    background: linear-gradient(to right, #F6FE06, #FF8800);
}

.enter{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 10px 20px;
    background: url("../img/bg-2.png") no-repeat center center;
    background-size: cover;
    min-height: 80vh;
}
.enter-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.experience{
    padding: 40px 0;
}
.experience-wrapper{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.experience-item{
    text-align: center;
    border-radius: 10px;
    padding: 20px;
}

.experience-item h4{
    padding-bottom: 10px;
}
#contact{
    padding: 40px 10%;
}
.contact-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 30px;
    text-align: center;
    border-radius: 7px;
    border: 5px solid #02390B;
    background: #224F22;
}

.contact-wrapper a{
    text-decoration: none;
    color: white;
}
#contacts{
    padding: 40px 10px;
}
.img-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}
.img-wrapper img{
    max-width: 140px;
}
.background-blue{
    background: #77C7CE;
    color: black;
}
@media (max-width: 830px) {
    header{
        padding: 0;
    }
    h1{
        font-size: 35px;
    }

    .col-wrapper, .experience-wrapper {
        flex-wrap: wrap;
    }

    .col, .experience-item, .age-cont, .header-cont {
        width: 100%;
    }
    .age{
        padding: 30px 10px;
    }
    .header-cont{
        padding: 10px;
    }
    .col-wrapper .col:not(:last-child){
        padding-bottom: 20px;
    }
}
.terms{
    padding: 40px 10px;
}
.terms a{
    text-decoration: underline;
    color: white;
}
header{
    padding-bottom: 80px;
}
h2{
    text-align: center;
}
body {
    background-color: #113C44;
    min-height: 100vh;
}
header{
    padding-bottom: 100px;
}
.game-container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 10px;
}
.slot-machine {
    width: 100%;
    max-width: 900px;
    text-align: center;
    background: #002830;
    padding: 40px 30px;
    border-radius: 10px;
}

.grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;

}
.balance-wrapper{
    min-width: 100px;
    color: white;
}
.column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: none;
    width: 19%;
}

.cell {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.cell img {
    max-width: 100%;
    max-height: 100%;
}
.info{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgb(255 255 255 / 15%);
    padding: 10px;
    border-radius: 10px;
    color: white;
}
.info-wrapper span{
    display: block;
    font-weight: bold;
    padding-top: 10px;
}
.decrease, .increase{
    padding: 10px;
    color: white;
    background: #0D1B2A;
    border-radius: 20px;
    border: 1px solid #FFD700;
}
.bet{
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    background: rgb(255 255 255 / 15%);
}
/* Анимация вращения колонок */
@keyframes spin {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-300%);
    }
}

button.spin {
    background: #FFD700;
    color: black;
    font-size: 20px;
    font-weight: bold;
    border: none;
    padding: 20px 30px;
    border-radius: 50px;
    cursor: pointer;
}

.navbar-container .hamburger-lines .line{
    background: black;
}
.controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
}
.controls-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
@media (max-width: 473px) {
    .controls{
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .balance-wrapper, .controls-wrapper{
        width: 100%;
    }
    .controls-wrapper{
        justify-content: center;
    }
    button.spin{
        padding: 10px 43px;
    }
}

/*modal*/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 300px;
    position: relative;
    color: black;
}

.modal .age-circle {
    background-color: #D50000;
    color: white;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}

.modal h2 {
    font-size: 18px;
    padding-bottom: 10px;
    color: black;
}


.modal button {
    background-color: #FFD700;
    border: none;
    color: black;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.modal button:hover {
    background-color: #e0a800;
}

.background-blue{
background: #2D2016;
color: #E5DCD5;
}
.logo img{
width: 100px;
background: linear-gradient(135deg, #FF7E3D 0%, #DA4F2A 100%);
}

/* Основные цвета и фон */
body {
    background: #1A0F07; /* Темное дерево */
    color: #E5DCD5; /* Состаренная бумага */
    font-family: "Montserrat", serif;
    line-height: 1.6;
    font-size: 16px;
}

/* Заголовки */
h1, h2, h3, h4 {
    font-family: "Montserrat", serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #C99D66; /* Золотое тиснение */
}

h1 {
    font-size: 45px;
    text-shadow: 0 0 10px #BB8C4D;
}

h2 {
    color: #BB8C4D; /* Античное золото */
    border-bottom: 2px solid #633517;
}

/* Ссылки как древние свитки */
a {
    color: #DAA520; /* Золотой */
    text-decoration: none;
    transition: all 0.5s ease;
}

a:hover {
    color: #FFD700; /* Яркое золото при наведении */
    text-shadow: 0 0 8px #C99D66;
    opacity: 1;
}

/* Кнопки как старинные печати */
.button, button.spin, .main-button {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    color: #1A0F07;
    border: 2px solid #633517;
    box-shadow: 0 0 15px rgba(201, 157, 102, 0.3);
}

.button:hover, button.spin:hover, .main-button:hover {
    background: linear-gradient(135deg, #DAA520 0%, #A0522D 100%);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.5);
}

/* Навигация как старинные книжные полки */
.navbar {
    background: rgba(26, 15, 7, 0.9);
    border-bottom: 3px solid #633517;
}

.menu-items li {
    font-family: "Montserrat", serif;
}

.navbar a {
    color: #C99D66;
}

.navbar-container .hamburger-lines .line {
    background: #C99D66;
}

/* Секции как старинные манускрипты */
.col-wrapper, .enter-wrapper, .experience-wrapper, .contact-wrapper {
    background: rgba(43, 27, 16, 0.7);
    border-radius: 10px;
    border: 1px solid #633517;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.contact-wrapper {
    border: 5px solid #633517;
    background: #2D2016;
}

/* Хедер как главный зал библиотеки */
.header {
    background: url("../img/header-bg.webp") no-repeat center center fixed;
    background-size: cover;
    position: relative;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 15, 7, 0.7);
}

.header-cont {
    position: relative;
    z-index: 2;
}

/* Секция возраста как старинный пергамент */
.age {
    background: #2D2016;
    color: #E5DCD5;
}

.age-cont {
    background: linear-gradient(to right, #3B2A16, #2D2016);
    border: 2px solid #633517;
}

/* Футер как темные деревянные перекрытия */
.footer-logo {
    background: #3B2A16;
}

.footer-age {
    background: #3B2A16;
    color: #E5DCD5;
}

/* Игровой автомат как древний артефакт */
.slot-machine {
    background: #2D2016;
    border: 3px solid #633517;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.2);
}

.grid {
    background: #1A0F07;
    border: 2px solid #8B4513;
}

.info {
    background: rgba(99, 53, 23, 0.4);
    border: 1px solid #8B4513;
}

.decrease, .increase {
    background: #3B2A16;
    border: 1px solid #C99D66;
    color: #C99D66;
}

.bet {
    background: rgba(99, 53, 23, 0.4);
    color: #C99D66;
}

.controls {
    background: rgba(59, 42, 22, 0.5);
    border: 1px solid #633517;
}

/* Модальное окно как древний свиток */
.modal-overlay {
    background-color: rgba(26, 15, 7, 0.95);
}

.modal {
    background: #2D2016;
    border: 3px solid #633517;
    color: #E5DCD5;
}

.modal .age-circle {
    background-color: #8B4513;
    color: #E5DCD5;
}

.modal h2 {
    color: #C99D66;
}

.modal button {
    background-color: #C99D66;
    color: #1A0F07;
}

.modal button:hover {
    background-color: #DAA520;
}

/* Фоновые секции */
.background-blue {
    background: #2D2016;
    color: #E5DCD5;
}

/* Анимация для оживающих книг */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

.col img, .img-col img {
    transition: all 0.8s ease;
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.3);
    border: 3px solid #633517;
}

.col img:hover, .img-col img:hover {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.7);
}

/* Лого как древняя печать */
.logo img {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    border-radius: 50%;
    border: 2px solid #633517;
    padding: 5px;
}

/* Основные цвета и фон */
body {
    background: #1A0F07; /* Темное дерево */
    color: #E5DCD5; /* Состаренная бумага */
    font-family: "Montserrat", serif;
    line-height: 1.6;
    font-size: 16px;
}

/* Заголовки с магическим свечением */
h1, h2, h3, h4 {
    font-family: "Montserrat", serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #C99D66; /* Золотое тиснение */
    position: relative;
}

h1 {
    font-size: 45px;
    text-shadow: 0 0 10px #BB8C4D;
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 10px #BB8C4D, 0 0 20px rgba(201, 157, 102, 0.2); }
    50% { text-shadow: 0 0 15px #DAA520, 0 0 30px rgba(218, 165, 32, 0.4); }
    100% { text-shadow: 0 0 10px #BB8C4D, 0 0 20px rgba(201, 157, 102, 0.2); }
}

h2 {
    color: #BB8C4D; /* Античное золото */
    border-bottom: 2px solid #633517;
    padding-bottom: 10px;
    position: relative;
}

h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: translateX(-50%);
    transition: width 0.5s ease;
}

h2:hover::after {
    width: 80%;
}

/* Ссылки как древние магические письмена */
a {
    color: #DAA520; /* Золотой */
    text-decoration: none;
    transition: all 0.5s ease;
    position: relative;
    padding: 2px 4px;
}

a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.5s ease;
}

a:hover {
    color: #FFD700; /* Яркое золото при наведении */
    text-shadow: 0 0 8px #C99D66;
    opacity: 1;
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.menu-items a {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.menu-items a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.menu-items a:hover::before {
    transform: translateX(100%);
}

/* Кнопки как магические артефакты */
.button, button.spin, .main-button {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    color: #1A0F07;
    border: 2px solid #633517;
    box-shadow: 0 0 15px rgba(201, 157, 102, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.button::before, button.spin::before, .main-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.7s ease;
    z-index: -1;
}

.button:hover::before, button.spin:hover::before, .main-button:hover::before {
    left: 100%;
}

.button:hover, button.spin:hover, .main-button:hover {
    background: linear-gradient(135deg, #DAA520 0%, #A0522D 100%);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2);
    animation: buttonPulse 2s infinite;
}

@keyframes buttonPulse {
    0% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2); }
    50% { box-shadow: 0 0 25px rgba(218, 165, 32, 0.7), 0 0 50px rgba(218, 165, 32, 0.3); }
    100% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2); }
}

/* Навигация как старинные книжные полки */
.navbar {
    background: rgba(26, 15, 7, 0.9);
    border-bottom: 3px solid #633517;
}

.menu-items li {
    font-family: "Montserrat", serif;
}

.navbar a {
    color: #C99D66;
}

.navbar-container .hamburger-lines .line {
    background: #C99D66;
}

/* Секции как зачарованные манускрипты */
.col-wrapper, .enter-wrapper, .experience-wrapper, .contact-wrapper {
    background: rgba(43, 27, 16, 0.7);
    border-radius: 10px;
    border: 1px solid #633517;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.col-wrapper::before, .enter-wrapper::before, .experience-wrapper::before, .contact-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 157, 102, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(201, 157, 102, 0.05) 0%, transparent 20%);
    z-index: -1;
}

.col-wrapper::after, .enter-wrapper::after, .experience-wrapper::after, .contact-wrapper::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(circle at center, rgba(201, 157, 102, 0.03) 0%, transparent 0.5%),
        radial-gradient(circle at center, rgba(201, 157, 102, 0.03) 0%, transparent 0.5%);
    background-position: 0 0, 10px 10px;
    background-size: 30px 30px;
    opacity: 0;
    animation: sparkle 8s linear infinite;
    transition: opacity 1s ease;
    z-index: -1;
}

.col-wrapper:hover::after, .enter-wrapper:hover::after, .experience-wrapper:hover::after, .contact-wrapper:hover::after {
    opacity: 1;
}

@keyframes sparkle {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100px) rotate(360deg); }
}

.contact-wrapper {
    border: 5px solid #633517;
    background: #2D2016;
}

.contact-wrapper::before {
    background: linear-gradient(135deg, rgba(201, 157, 102, 0.1) 0%, transparent 100%);
}

/* Хедер как главный зал магической библиотеки */
.header {
    background: url("../img/header-bg.webp") no-repeat center center fixed;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 15, 7, 0.7);
}

.header::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(201, 157, 102, 0.1) 100%);
    opacity: 0.4;
    animation: dustParticles 20s linear infinite;
}

@keyframes dustParticles {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-cont {
    position: relative;
    z-index: 2;
}

.header-cont h1 {
    position: relative;
}

.header-cont h1::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    bottom: -5px;
    left: 10%;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    animation: lineShimmer 3s infinite;
}

@keyframes lineShimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Секция возраста как старинный пергамент */
.age {
    background: #2D2016;
    color: #E5DCD5;
}

.age-cont {
    background: linear-gradient(to right, #3B2A16, #2D2016);
    border: 2px solid #633517;
}

/* Футер как темные деревянные перекрытия */
.footer-logo {
    background: #3B2A16;
}

.footer-age {
    background: #3B2A16;
    color: #E5DCD5;
}

/* Игровой автомат как древний магический артефакт */
.slot-machine {
    background: #2D2016;
    border: 3px solid #633517;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.2);
    position: relative;
    overflow: hidden;
}

.slot-machine::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: repeating-linear-gradient(
        45deg,
        rgba(201, 157, 102, 0.05),
        rgba(201, 157, 102, 0.05) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: -1;
    animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
    0% { transform: translate(-20px, -20px); }
    100% { transform: translate(20px, 20px); }
}

.grid {
    background: #1A0F07;
    border: 2px solid #8B4513;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(201, 157, 102, 0.1) 0%,
        transparent 10%,
        transparent 90%,
        rgba(201, 157, 102, 0.1) 100%
    );
    pointer-events: none;
}

.cell {
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cell:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.info {
    background: rgba(99, 53, 23, 0.4);
    border: 1px solid #8B4513;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.decrease, .increase {
    background: #3B2A16;
    border: 1px solid #C99D66;
    color: #C99D66;
    transition: all 0.3s ease;
}

.decrease:hover, .increase:hover {
    background: #4E3520;
    box-shadow: 0 0 10px rgba(201, 157, 102, 0.5);
    transform: translateY(-2px);
}

.bet {
    background: rgba(99, 53, 23, 0.4);
    color: #C99D66;
    position: relative;
    overflow: hidden;
}

.bet::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(201, 157, 102, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bet:hover::after {
    opacity: 1;
}

.controls {
    background: rgba(59, 42, 22, 0.5);
    border: 1px solid #633517;
    position: relative;
}

.controls::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent, rgba(201, 157, 102, 0.1), transparent) no-repeat;
    background-size: 200% 100%;
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Модальное окно как древний свиток */
.modal-overlay {
    background-color: rgba(26, 15, 7, 0.95);
}

.modal {
    background: #2D2016;
    border: 3px solid #633517;
    color: #E5DCD5;
}

.modal .age-circle {
    background-color: #8B4513;
    color: #E5DCD5;
}

.modal h2 {
    color: #C99D66;
}

.modal button {
    background-color: #C99D66;
    color: #1A0F07;
}

.modal button:hover {
    background-color: #DAA520;
}

/* Фоновые секции */
.background-blue {
    background: #2D2016;
    color: #E5DCD5;
}

/* Анимации для оживающих книг и магических эффектов */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes glow {
    0% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.3); }
    50% { box-shadow: 0 0 30px rgba(218, 165, 32, 0.7); }
    100% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.3); }
}

@keyframes pageflip {
    0% { transform: perspective(1000px) rotateY(0deg); }
    100% { transform: perspective(1000px) rotateY(15deg); }
}

@keyframes magicDust {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.col img, .img-col img {
    transition: all 0.8s ease;
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.3);
    border: 3px solid #633517;
    position: relative;
}

.col img:hover, .img-col img:hover {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.7);
    transform-origin: center center;
}

.col img::before, .img-col img::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 5px;
    background: linear-gradient(45deg, transparent, rgba(201, 157, 102, 0.1), transparent);
    z-index: -1;
    animation: magicDust 3s linear infinite;
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.col img:hover::before, .img-col img:hover::before {
    opacity: 1;
}

/* Лого как магическая печать */
.logo img {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    border-radius: 50%;
    border: 2px solid #633517;
    padding: 5px;
    position: relative;
    transition: all 0.5s ease;
}

.logo img::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(201, 157, 102, 0.5),
        transparent,
        transparent,
        rgba(201, 157, 102, 0.5),
        transparent
    );
    border-radius: 50%;
    z-index: -1;
    animation: rotateHalo 4s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo:hover img {
    transform: rotate(10deg);
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.5);
}

.logo:hover img::before {
    opacity: 1;
}

@keyframes rotateHalo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Добавим магическую дымку в начале экрана */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 10%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(201, 157, 102, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Добавим эффект "летающих страниц" по всему сайту */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 40px 60px, rgba(201, 157, 102, 0.15), transparent),
        radial-gradient(1px 1px at 20px 50px, rgba(218, 165, 32, 0.1), transparent),
        radial-gradient(2px 2px at 30px 100px, rgba(255, 215, 0, 0.15), transparent),
        radial-gradient(2px 2px at 40px 60px, rgba(201, 157, 102, 0.2), transparent),
        radial-gradient(2px 2px at 110px 90px, rgba(255, 215, 0, 0.1), transparent),
        radial-gradient(1px 1px at 90px 10px, rgba(201, 157, 102, 0.2), transparent),
        radial-gradient(1px 1px at 230px 30px, rgba(218, 165, 32, 0.15), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.3;
    animation: fadeInOut 8s ease-in-out infinite, floatBackground 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

@keyframes floatBackground {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
/* Добавим эффект пергаментных заметок для модальных окон */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.modal {
    background: #2D2016;
    padding: 20px;
    border-radius: 10px;
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(201, 157, 102, 0.2);
    text-align: center;
    width: 300px;
    position: relative;
    color: #E5DCD5;
    border: 2px solid #633517;
    transform: perspective(1000px) rotateX(2deg);
    transition: transform 0.3s ease;
}

.modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(135deg, transparent, rgba(201, 157, 102, 0.05), transparent);
    pointer-events: none;
    z-index: -1;
    border-radius: 8px;
}

.modal:hover {
    transform: perspective(1000px) rotateX(0deg);
}

.modal .age-circle {
    background-color: #8B4513;
    color: #E5DCD5;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    box-shadow:
        0 0 10px rgba(201, 157, 102, 0.4),
        0 0 20px rgba(201, 157, 102, 0.2);
    position: relative;
    overflow: hidden;
}

.modal .age-circle::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        transparent 0deg,
        rgba(201, 157, 102, 0.1) 60deg,
        transparent 120deg,
        rgba(201, 157, 102, 0.1) 180deg,
        transparent 240deg,
        rgba(201, 157, 102, 0.1) 300deg
    );
    animation: rotateHalo 10s linear infinite;
}

.modal h2 {
    font-size: 18px;
    padding-bottom: 10px;
    color: #C99D66;
    position: relative;
    display: inline-block;
}

.modal h2::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 5px;
    left: 0;
    background: linear-gradient(90deg, transparent, rgba(201, 157, 102, 0.5), transparent);
}

.modal button {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    border: none;
    color: #1A0F07;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #633517;
}

.modal button::before/* Основные цвета и фон */
body {
    background: #1A0F07; /* Темное дерево */
    color: #E5DCD5; /* Состаренная бумага */
    font-family: "Montserrat", serif;
    line-height: 1.6;
    font-size: 16px;
}

/* Заголовки с магическим свечением */
h1, h2, h3, h4 {
    font-family: "Montserrat", serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #C99D66; /* Золотое тиснение */
    position: relative;
}

h1 {
    font-size: 45px;
    text-shadow: 0 0 10px #BB8C4D;
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 10px #BB8C4D, 0 0 20px rgba(201, 157, 102, 0.2); }
    50% { text-shadow: 0 0 15px #DAA520, 0 0 30px rgba(218, 165, 32, 0.4); }
    100% { text-shadow: 0 0 10px #BB8C4D, 0 0 20px rgba(201, 157, 102, 0.2); }
}

/* Декоративные элементы для заголовков - декоративные орнаменты */
h2::before, h2::after {
    content: "✦";
    display: inline-block;
    color: #C99D66;
    margin: 0 15px;
    font-size: 80%;
    opacity: 0.7;
    text-shadow: 0 0 5px rgba(201, 157, 102, 0.4);
    animation: ornamentPulse 3s infinite;
}

h3::before, h3::after {
    content: "❧";
    display: inline-block;
    font-size: 70%;
    color: #C99D66;
    margin: 0 10px;
    opacity: 0.8;
    vertical-align: middle;
    text-shadow: 0 0 5px rgba(201, 157, 102, 0.4);
}

@keyframes ornamentPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Стилизованная первая буква параграфов для эффекта старинного манускрипта */
.col p:first-of-type::first-letter,
.col-100 p:first-of-type::first-letter {
    font-size: 200%;
    color: #DAA520;
    font-weight: bold;
    float: left;
    margin-right: 5px;
    line-height: 1;
    text-shadow: 0 0 2px rgba(201, 157, 102, 0.4);
}

/* Ссылки как древние магические письмена */
a {
    color: #DAA520; /* Золотой */
    text-decoration: none;
    transition: all 0.5s ease;
    position: relative;
    padding: 2px 4px;
}

a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.5s ease;
}

a:hover {
    color: #FFD700; /* Яркое золото при наведении */
    text-shadow: 0 0 8px #C99D66;
    opacity: 1;
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

.menu-items a {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.menu-items a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.menu-items a:hover::before {
    transform: translateX(100%);
}

/* Кнопки как магические артефакты */
.button, button.spin, .main-button {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    color: #1A0F07;
    border: 2px solid #633517;
    box-shadow: 0 0 15px rgba(201, 157, 102, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.button::before, button.spin::before, .main-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
    transition: left 0.7s ease;
    z-index: -1;
}

.button:hover::before, button.spin:hover::before, .main-button:hover::before {
    left: 100%;
}

.button:hover, button.spin:hover, .main-button:hover {
    background: linear-gradient(135deg, #DAA520 0%, #A0522D 100%);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2);
    animation: buttonPulse 2s infinite;
}

@keyframes buttonPulse {
    0% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2); }
    50% { box-shadow: 0 0 25px rgba(218, 165, 32, 0.7), 0 0 50px rgba(218, 165, 32, 0.3); }
    100% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.5), 0 0 40px rgba(201, 157, 102, 0.2); }
}

/* Навигация как старинные книжные полки */
.navbar {
    background: rgba(26, 15, 7, 0.9);
    border-bottom: 3px solid #633517;
}

.menu-items li {
    font-family: "Montserrat", serif;
}

.navbar a {
    color: #C99D66;
}

.navbar-container .hamburger-lines .line {
    background: #C99D66;
}

/* Эффект свитка для секций контента с золотой печатью */
.col-wrapper, .enter-wrapper, .experience-wrapper, .contact-wrapper {
    background: rgba(43, 27, 16, 0.7);
    border-radius: 10px;
    border: 1px solid #633517;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.col-wrapper::before, .enter-wrapper::before, .experience-wrapper::before, .contact-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(201, 157, 102, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(201, 157, 102, 0.05) 0%, transparent 20%);
    z-index: -1;
}

/* Печать для заголовков секций */
h2 {
    color: #BB8C4D; /* Античное золото */
    border-bottom: 2px solid #633517;
    padding-bottom: 10px;
    position: relative;
    display: inline-block;
}

h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    transform: translateX(-50%);
    transition: width 0.5s ease;
}

h2:hover::after {
    width: 80%;
}

/* Добавление печати */
.section-title {
    position: relative;
    text-align: center;
}

.section-title::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: -30px;
    left: calc(50% - 30px);
    background:
        radial-gradient(circle, rgba(201, 157, 102, 0.2) 0%, rgba(201, 157, 102, 0.1) 40%, transparent 70%),
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(201, 157, 102, 0.1) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(201, 157, 102, 0.1) 50deg,
            transparent 60deg,
            transparent 80deg,
            rgba(201, 157, 102, 0.1) 90deg,
            transparent 100deg,
            transparent 120deg,
            rgba(201, 157, 102, 0.1) 130deg,
            transparent 140deg,
            transparent 160deg,
            rgba(201, 157, 102, 0.1) 170deg,
            transparent 180deg,
            transparent 200deg,
            rgba(201, 157, 102, 0.1) 210deg,
            transparent 220deg,
            transparent 240deg,
            rgba(201, 157, 102, 0.1) 250deg,
            transparent 260deg,
            transparent 280deg,
            rgba(201, 157, 102, 0.1) 290deg,
            transparent 300deg,
            transparent 320deg,
            rgba(201, 157, 102, 0.1) 330deg,
            transparent 340deg
        );
    border-radius: 50%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
}

.section-title:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.col-wrapper::after, .enter-wrapper::after, .experience-wrapper::after, .contact-wrapper::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        radial-gradient(circle at center, rgba(201, 157, 102, 0.03) 0%, transparent 0.5%),
        radial-gradient(circle at center, rgba(201, 157, 102, 0.03) 0%, transparent 0.5%);
    background-position: 0 0, 10px 10px;
    background-size: 30px 30px;
    opacity: 0;
    animation: sparkle 8s linear infinite;
    transition: opacity 1s ease;
    z-index: -1;
}

.col-wrapper:hover::after, .enter-wrapper:hover::after, .experience-wrapper:hover::after, .contact-wrapper:hover::after {
    opacity: 1;
}

@keyframes sparkle {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100px) rotate(360deg); }
}

.contact-wrapper {
    border: 5px solid #633517;
    background: #2D2016;
}

.contact-wrapper::before {
    background: linear-gradient(135deg, rgba(201, 157, 102, 0.1) 0%, transparent 100%);
}

/* Добавим эффект старинных витражей для header */
.header {
    background: url("../img/header-bg.webp") no-repeat center center fixed;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 15, 7, 0.7);
    mask-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 2px, rgba(0, 0, 0, 0.1) 4px);
    mask-size: 4px 4px;
}

.header::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        linear-gradient(0deg, transparent 0%, rgba(201, 157, 102, 0.05) 50%, transparent 100%),
        radial-gradient(ellipse at center, transparent 60%, rgba(201, 157, 102, 0.1) 100%);
    opacity: 0.4;
    animation: dustParticles 20s linear infinite;
}

/* Добавим эффект "лучей света" для header */
.header-cont::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 30%;
    width: 40%;
    height: 300%;
    background: linear-gradient(to bottom, transparent, rgba(201, 157, 102, 0.05), transparent);
    transform: rotate(30deg);
    pointer-events: none;
    animation: lightBeam 10s ease-in-out infinite alternate;
}

@keyframes lightBeam {
    0% { opacity: 0.1; transform: rotate(30deg); }
    50% { opacity: 0.2; transform: rotate(32deg); }
    100% { opacity: 0.1; transform: rotate(28deg); }
}

@keyframes dustParticles {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.header-cont {
    position: relative;
    z-index: 2;
}

.header-cont h1 {
    position: relative;
}

.header-cont h1::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 2px;
    bottom: -5px;
    left: 10%;
    background: linear-gradient(90deg, transparent, #DAA520, transparent);
    animation: lineShimmer 3s infinite;
}

@keyframes lineShimmer {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Секция возраста как старинный пергамент */
.age {
    background: #2D2016;
    color: #E5DCD5;
}

.age-cont {
    background: linear-gradient(to right, #3B2A16, #2D2016);
    border: 2px solid #633517;
}

/* Футер как темные деревянные перекрытия */
.footer-logo {
    background: #3B2A16;
}

.footer-age {
    background: #3B2A16;
    color: #E5DCD5;
}

/* Игровой автомат как древний магический артефакт */
.slot-machine {
    background: #2D2016;
    border: 3px solid #633517;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.2);
    position: relative;
    overflow: hidden;
}

.slot-machine::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: repeating-linear-gradient(
        45deg,
        rgba(201, 157, 102, 0.05),
        rgba(201, 157, 102, 0.05) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: -1;
    animation: patternMove 20s linear infinite;
}

@keyframes patternMove {
    0% { transform: translate(-20px, -20px); }
    100% { transform: translate(20px, 20px); }
}

.grid {
    background: #1A0F07;
    border: 2px solid #8B4513;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(201, 157, 102, 0.1) 0%,
        transparent 10%,
        transparent 90%,
        rgba(201, 157, 102, 0.1) 100%
    );
    pointer-events: none;
}

.cell {
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cell:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.info {
    background: rgba(99, 53, 23, 0.4);
    border: 1px solid #8B4513;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.decrease, .increase {
    background: #3B2A16;
    border: 1px solid #C99D66;
    color: #C99D66;
    transition: all 0.3s ease;
}

.decrease:hover, .increase:hover {
    background: #4E3520;
    box-shadow: 0 0 10px rgba(201, 157, 102, 0.5);
    transform: translateY(-2px);
}

.bet {
    background: rgba(99, 53, 23, 0.4);
    color: #C99D66;
    position: relative;
    overflow: hidden;
}

.bet::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(201, 157, 102, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bet:hover::after {
    opacity: 1;
}

.controls {
    background: rgba(59, 42, 22, 0.5);
    border: 1px solid #633517;
    position: relative;
}

.controls::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(90deg, transparent, rgba(201, 157, 102, 0.1), transparent) no-repeat;
    background-size: 200% 100%;
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Модальное окно как древний свиток */
.modal-overlay {
    background-color: rgba(26, 15, 7, 0.95);
}

.modal {
    background: #2D2016;
    border: 3px solid #633517;
    color: #E5DCD5;
}

.modal .age-circle {
    background-color: #8B4513;
    color: #E5DCD5;
}

.modal h2 {
    color: #C99D66;
}

.modal button {
    background-color: #C99D66;
    color: #1A0F07;
}

.modal button:hover {
    background-color: #DAA520;
}

/* Фоновые секции */
.background-blue {
    background: #2D2016;
    color: #E5DCD5;
}

/* Анимации для оживающих книг и магических эффектов */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes glow {
    0% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.3); }
    50% { box-shadow: 0 0 30px rgba(218, 165, 32, 0.7); }
    100% { box-shadow: 0 0 20px rgba(201, 157, 102, 0.3); }
}

@keyframes pageflip {
    0% { transform: perspective(1000px) rotateY(0deg); }
    100% { transform: perspective(1000px) rotateY(15deg); }
}

@keyframes magicDust {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.col img, .img-col img {
    transition: all 0.8s ease;
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.3);
    border: 3px solid #633517;
    position: relative;
}

.col img:hover, .img-col img:hover {
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(201, 157, 102, 0.7);
    transform-origin: center center;
}

.col img::before, .img-col img::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 5px;
    background: linear-gradient(45deg, transparent, rgba(201, 157, 102, 0.1), transparent);
    z-index: -1;
    animation: magicDust 3s linear infinite;
    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.col img:hover::before, .img-col img:hover::before {
    opacity: 1;
}

/* Лого как магическая печать */
.logo img {
    background: linear-gradient(135deg, #C99D66 0%, #8B4513 100%);
    border-radius: 50%;
    border: 2px solid #633517;
    padding: 5px;
    position: relative;
    transition: all 0.5s ease;
}

.logo img::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(201, 157, 102, 0.5),
        transparent,
        transparent,
        rgba(201, 157, 102, 0.5),
        transparent
    );
    border-radius: 50%;
    z-index: -1;
    animation: rotateHalo 4s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo:hover img {
    transform: rotate(10deg);
    box-shadow: 0 0 20px rgba(201, 157, 102, 0.5);
}

.logo:hover img::before {
    opacity: 1;
}

@keyframes rotateHalo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Добавим магическую дымку в начале экрана */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 10%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(201, 157, 102, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Добавим эффект "летающих страниц" по всему сайту */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 40px 60px, rgba(201, 157, 102, 0.15), transparent),
        radial-gradient(1px 1px at 20px 50px, rgba(218, 165, 32, 0.1), transparent),
        radial-gradient(2px 2px at 30px 100px, rgba(255, 215, 0, 0.15), transparent),
        radial-gradient(2px 2px at 40px 60px, rgba(201, 157, 102, 0.2), transparent),
        radial-gradient(2px 2px at 110px 90px, rgba(255, 215, 0, 0.1), transparent),
        radial-gradient(1px 1px at 90px 10px, rgba(201, 157, 102, 0.2), transparent),
        radial-gradient(1px 1px at 230px 30px, rgba(218, 165, 32, 0.15), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.3;
    animation: fadeInOut 8s ease-in-out infinite, floatBackground 60s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

@keyframes floatBackground {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}
