:root {
    /* Основные цвета */
    --color-background: #1A0B2E; /* Тёмно-фиолетовый - ночное небо */
    --color-text: #E6E6FA; /* Светло-лавандовый */
    --color-heading: #9D71E8; /* Яркий фиолетовый - магический */
    --color-link-hover: rgba(224, 176, 255, 0.8); /* Лавандовый с прозрачностью */

    /* Акцентные цвета */
    --color-accent-1: #6A4BC4; /* Насыщенный лавандовый - магия */
    --color-accent-2: #3F1651; /* Тёмно-фиолетовый - глубина */
    --color-accent-3: #7659B6; /* Средний фиолетовый - сумерки */

    /* Фоновые цвета */
    --color-background-dark: #0A051F; /* Глубокий космос/ночь */
    --color-background-darker: #05020F; /* Бездна */
    --color-background-light: rgba(105, 76, 196, 0.15); /* Полупрозрачный фиолетовый */
    --color-background-lighter: rgba(157, 113, 232, 0.2); /* Светлее фиолетовый */

    /* Цвета контролов */
    --color-control: #2C1B47; /* Тёмно-фиолетовый */
    --color-control-border: #9D71E8; /* Яркий фиолетовый */

    /* Цвета кнопок */
    --color-button: #9D71E8; /* Яркий фиолетовый */
    --color-button-hover: #8860D0; /* Слегка темнее */
    --color-button-gradient-start: #B68CE6; /* Светлый фиолетовый */
    --color-button-gradient-end: #6A4BC4; /* Насыщенный фиолетовый */

    /* Модальное окно */
    --color-modal-background: #F7F2FF; /* Светлый фон с оттенком */
    --color-modal-text: #1A0B2E; /* Тёмно-фиолетовый */
    --color-modal-circle: #6A4BC4; /* Насыщенный фиолетовый */
}

body {
    background-image: linear-gradient(to bottom, var(--color-background), var(--color-background-dark));
    background-attachment: fixed;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="15" cy="25" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="35" cy="65" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="65" cy="15" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="85" cy="85" r="0.5" fill="%239D71E8" opacity="0.5"/></svg>');
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

.header {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-background-dark) 100%),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10,1 L19,10 L10,19 L1,10 Z" fill="none" stroke="%239D71E8" stroke-width="0.5" opacity="0.3"/></svg>');
    position: relative;
    overflow: hidden;
}

.header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%231A0B2E" d="M0,96L60,112C120,128,240,160,360,160C480,160,600,128,720,128C840,128,960,160,1080,160C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
    background-size: cover;
}

h1, h2, h3, h4 {
    text-shadow: 0 0 10px rgba(157, 113, 232, 0.5);
    letter-spacing: 2px;
}

h1::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-button-gradient-start), var(--color-button-gradient-end));
    margin: 15px auto 0;
    border-radius: 3px;
}

.main-button {
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.4);
    position: relative;
    overflow: hidden;
}

.main-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -50%;
    }
    100% {
        left: 150%;
    }
}

.experience-item {
    background: var(--color-background-light);
    border: 1px solid var(--color-accent-1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.experience-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(106, 75, 196, 0.3);
}

.col-wrapper {
    position: relative;
}

.col-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--color-accent-1), transparent);
    z-index: -1;
}

.img-col img {
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.img-col img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(106, 75, 196, 0.4);
}

.contact-wrapper {
    border: none;
    background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-3));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.contact-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="1" fill="%239D71E8" opacity="0.1"/></svg>');
    opacity: 0.2;
}

.footer-age {
    background: var(--color-accent-1);
}

.footer-logo {
    background: var(--color-accent-1);
}

.age {
    background: var(--color-accent-1);
}

.age-cont {
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-3));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.navbar {
    background-color: rgba(10, 5, 31, 0.8);
    backdrop-filter: blur(10px);
}

.menu-items li a {
    position: relative;
}

.menu-items li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-heading);
    transition: width 0.3s ease;
}

.menu-items li a:hover::after {
    width: 100%;
}

.slot-machine {
    background: linear-gradient(145deg, var(--color-background-dark), var(--color-background-darker));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-accent-1);
}

.cell {
    background: var(--color-background-light);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.grid {
    background: var(--color-background-darker);
    border: 1px solid var(--color-accent-1);
    box-shadow: inset 0 0 20px rgba(106, 75, 196, 0.2);
}

button.spin {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.spin:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(106, 75, 196, 0.5);
}

.decrease, .increase {
    background: var(--color-background-darker);
    border: 1px solid var(--color-heading);
    transition: transform 0.2s ease, background 0.2s ease;
}

.decrease:hover, .increase:hover {
    background: var(--color-accent-1);
    transform: translateY(-2px);
}

.bet {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.controls {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.info {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.modal {
    background: var(--color-modal-background);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-accent-1);
}

.modal .age-circle {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
}

.modal button {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.2);
}

.logo img {
    background: var(--color-accent-1);
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Добавляем анимацию "движения поезда" для некоторых элементов */
@keyframes train-motion {
    0% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(-2px);
    }
}

.logo {
    animation: train-motion 3s infinite ease-in-out;
}

/* Создаем эффект "рун" на некоторых элементах */
.button::before,
.main-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15,5 L15,25 M10,10 L20,20 M20,10 L10,20" stroke="%23FFFFFF" stroke-width="0.5" opacity="0.1"/></svg>');
    pointer-events: none;
}

/* Анимация "портала" для некоторых контейнеров */
@keyframes portal-glow {
    0% {
        box-shadow: 0 0 5px rgba(157, 113, 232, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(157, 113, 232, 0.5);
    }
    100% {
        box-shadow: 0 0 5px rgba(157, 113, 232, 0.3);
    }
}

.enter-wrapper,
.contact-wrapper {
    animation: portal-glow 4s infinite ease-in-out;
}

:root {
    /* Основные цвета */
    --color-background: #1A0B2E; /* Тёмно-фиолетовый - ночное небо */
    --color-text: #E6E6FA; /* Светло-лавандовый */
    --color-heading: #9D71E8; /* Яркий фиолетовый - магический */
    --color-link-hover: rgba(224, 176, 255, 0.8); /* Лавандовый с прозрачностью */

    /* Акцентные цвета */
    --color-accent-1: #6A4BC4; /* Насыщенный лавандовый - магия */
    --color-accent-2: #3F1651; /* Тёмно-фиолетовый - глубина */
    --color-accent-3: #7659B6; /* Средний фиолетовый - сумерки */

    /* Фоновые цвета */
    --color-background-dark: #0A051F; /* Глубокий космос/ночь */
    --color-background-darker: #05020F; /* Бездна */
    --color-background-light: rgba(105, 76, 196, 0.15); /* Полупрозрачный фиолетовый */
    --color-background-lighter: rgba(157, 113, 232, 0.2); /* Светлее фиолетовый */

    /* Цвета контролов */
    --color-control: #2C1B47; /* Тёмно-фиолетовый */
    --color-control-border: #9D71E8; /* Яркий фиолетовый */

    /* Цвета кнопок */
    --color-button: #9D71E8; /* Яркий фиолетовый */
    --color-button-hover: #8860D0; /* Слегка темнее */
    --color-button-gradient-start: #B68CE6; /* Светлый фиолетовый */
    --color-button-gradient-end: #6A4BC4; /* Насыщенный фиолетовый */

    /* Модальное окно */
    --color-modal-background: #F7F2FF; /* Светлый фон с оттенком */
    --color-modal-text: #1A0B2E; /* Тёмно-фиолетовый */
    --color-modal-circle: #6A4BC4; /* Насыщенный фиолетовый */
}

body {
    background-image: linear-gradient(to bottom, var(--color-background), var(--color-background-dark));
    background-attachment: fixed;
    position: relative;
    perspective: 1000px;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="15" cy="25" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="35" cy="65" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="65" cy="15" r="0.5" fill="%239D71E8" opacity="0.5"/><circle cx="85" cy="85" r="0.5" fill="%239D71E8" opacity="0.5"/></svg>');
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
    animation: stars 100s linear infinite;
}

@keyframes stars {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.header {
    background: linear-gradient(135deg, var(--color-accent-1) 0%, var(--color-background-dark) 100%),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10,1 L19,10 L10,19 L1,10 Z" fill="none" stroke="%239D71E8" stroke-width="0.5" opacity="0.3"/></svg>');
    position: relative;
    overflow: hidden;
}

.header::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%231A0B2E" d="M0,96L60,112C120,128,240,160,360,160C480,160,600,128,720,128C840,128,960,160,1080,160C1200,160,1320,128,1380,112L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
    background-size: cover;
}

.header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(157, 113, 232, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(106, 75, 196, 0.15) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
}

h1, h2, h3, h4 {
    text-shadow: 0 0 10px rgba(157, 113, 232, 0.5);
    letter-spacing: 2px;
}

h1::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-button-gradient-start), var(--color-button-gradient-end));
    margin: 15px auto 0;
    border-radius: 3px;
}

.main-button {
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.4);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-button::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: shine 4s infinite;
    z-index: 1;
}

.main-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15,5 L15,25 M10,10 L20,20 M20,10 L10,20 M5,15 L25,15" stroke="%23FFFFFF" stroke-width="0.5" opacity="0.15"/></svg>');
    z-index: 0;
    pointer-events: none;
}

.main-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(106, 75, 196, 0.6);
}

@keyframes shine {
    0% {
        left: -150%;
    }
    30%, 100% {
        left: 250%;
    }
}

.experience-item {
    background: var(--color-background-light);
    border: 1px solid var(--color-accent-1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.experience-item::before {
    content: "";
    position: absolute;
    top: -150%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(157, 113, 232, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-items 6s infinite;
    animation-delay: calc(var(--n, 0) * 1s);
}

.experience-item:nth-child(1) {
    --n: 0;
}

.experience-item:nth-child(2) {
    --n: 1;
}

.experience-item:nth-child(3) {
    --n: 2;
}

.experience-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(106, 75, 196, 0.3);
}

.experience-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--color-accent-1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.experience-item:hover::after {
    opacity: 1;
}

@keyframes shine-items {
    0% {
        left: -150%;
    }
    30%, 100% {
        left: 350%;
    }
}

.col-wrapper {
    position: relative;
}

.col-wrapper::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10%;
    height: 80%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--color-accent-1), transparent);
    z-index: -1;
    box-shadow: 0 0 15px var(--color-accent-1);
    animation: glow-pulse 3s infinite alternate;
}

@keyframes glow-pulse {
    0% {
        opacity: 0.3;
        box-shadow: 0 0 5px var(--color-accent-1);
    }
    100% {
        opacity: 0.8;
        box-shadow: 0 0 20px var(--color-accent-1);
    }
}

.col-wrapper::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4" fill="%239D71E8"/><path d="M3,10 L17,10 M10,3 L10,17" stroke="%239D71E8" stroke-width="1" opacity="0.6"/></svg>');
    transform: translateX(-50%);
    z-index: 1;
    animation: rotate-rune 8s linear infinite;
}

@keyframes rotate-rune {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

.img-col img {
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.img-col img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(106, 75, 196, 0.4);
}

.contact-wrapper {
    border: none;
    background: linear-gradient(135deg, var(--color-accent-2), var(--color-accent-3));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    animation: portal-glow 4s infinite ease-in-out;
}

.contact-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="1" fill="%239D71E8" opacity="0.15"/></svg>');
    opacity: 0.2;
}

.contact-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(157, 113, 232, 0.2) 0%, transparent 70%);
    opacity: 0;
    animation: portal-open 5s infinite alternate;
    pointer-events: none;
}

@keyframes portal-open {
    0%, 30% {
        opacity: 0;
        transform: scale(0.8);
    }
    70%, 100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

.contact-wrapper a {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.contact-wrapper a:hover {
    text-shadow: 0 0 8px var(--color-heading);
}

.footer-age {
    background: var(--color-accent-1);
}

.footer-logo {
    background: var(--color-accent-1);
}

.age {
    background: var(--color-accent-1);
}

.age-cont {
    background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-3));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.navbar {
    background-color: rgba(10, 5, 31, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    animation: nav-appear 1s ease-out;
}

@keyframes nav-appear {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.menu-items li a {
    position: relative;
    display: inline-block;
}

.menu-items li a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--color-heading);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-items li a:hover::before {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
}

.menu-items li a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-heading), transparent);
    transition: width 0.3s ease;
}

.menu-items li a:hover::after {
    width: 100%;
}

.slot-machine {
    background: linear-gradient(145deg, var(--color-background-dark), var(--color-background-darker));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
                0 0 60px rgba(106, 75, 196, 0.2);
    border: 1px solid var(--color-accent-1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.slot-machine::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%239D71E8" stroke-width="0.5" opacity="0.1"/><path d="M20,50 L80,50 M50,20 L50,80" stroke="%239D71E8" stroke-width="0.5" opacity="0.1"/></svg>');
    pointer-events: none;
    opacity: 0.5;
    animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.grid {
    background: var(--color-background-darker);
    border: 1px solid var(--color-accent-1);
    box-shadow: inset 0 0 20px rgba(106, 75, 196, 0.2),
                0 0 15px rgba(157, 113, 232, 0.2);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.grid::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,
                transparent 0%,
                rgba(157, 113, 232, 0.05) 25%,
                transparent 50%,
                rgba(157, 113, 232, 0.05) 75%,
                transparent 100%);
    background-size: 200% 200%;
    animation: grain 8s linear infinite;
    pointer-events: none;
}

@keyframes grain {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.cell {
    background: var(--color-background-light);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(157, 113, 232, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cell:hover {
    transform: scale(1.03);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2),
                0 0 15px rgba(157, 113, 232, 0.3);
}

.cell::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center,
                rgba(157, 113, 232, 0.2) 0%,
                transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cell:hover::before {
    opacity: 1;
    transform: scale(1);
}

button.spin {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.4),
                0 0 30px rgba(157, 113, 232, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

button.spin::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle at center,
                rgba(255, 255, 255, 0.8) 0%,
                transparent 30%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

button.spin:hover::before {
    opacity: 0.2;
    transform: scale(1);
}

button.spin:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(106, 75, 196, 0.5),
                0 0 40px rgba(157, 113, 232, 0.3);
}

button.spin:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 10px rgba(106, 75, 196, 0.3),
                0 0 20px rgba(157, 113, 232, 0.1);
}

button.spin::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M30,50 A20,20 0 0,1 70,50 A20,20 0 0,1 30,50 Z" fill="none" stroke="%23FFFFFF" stroke-width="0.5" opacity="0.1"/><path d="M10,50 L90,50" stroke="%23FFFFFF" stroke-width="0.5" opacity="0.1"/></svg>');
    opacity: 0.2;
    z-index: -1;
    animation: rotate-slow-reverse 8s linear infinite;
}

@keyframes rotate-slow-reverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

.decrease, .increase {
    background: var(--color-background-darker);
    border: 1px solid var(--color-heading);
    transition: transform 0.2s ease, background 0.2s ease;
}

.decrease:hover, .increase:hover {
    background: var(--color-accent-1);
    transform: translateY(-2px);
}

.bet {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
    position: relative;
    overflow: hidden;
}

.bet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
                rgba(157, 113, 232, 0.2) 0%,
                transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bet:hover::before {
    opacity: 1;
}

.controls {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.info {
    background: var(--color-background-light);
    border: 1px solid rgba(157, 113, 232, 0.3);
}

.modal {
    background: var(--color-modal-background);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
                0 0 100px rgba(157, 113, 232, 0.5);
    border: 1px solid var(--color-accent-1);
    animation: modal-appear 0.5s ease-out;
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
}

@keyframes modal-appear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background:
        linear-gradient(45deg, transparent 20%, rgba(157, 113, 232, 0.3) 40%, transparent 60%),
        linear-gradient(-45deg, transparent 20%, rgba(106, 75, 196, 0.3) 40%, transparent 60%);
    border-radius: 15px;
    z-index: -1;
    animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.modal .age-circle {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.4),
                inset 0 0 10px rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.modal .age-circle::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    animation: circle-pulse 3s infinite alternate;
}

@keyframes circle-pulse {
    0% {
        opacity: 0.1;
        transform: scale(0.8);
    }
    100% {
        opacity: 0.3;
        transform: scale(1.2);
    }
}

.modal h2 {
    position: relative;
    display: inline-block;
}

.modal h2::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent-1), transparent);
}

.modal button {
    background: linear-gradient(to right, var(--color-button-gradient-start), var(--color-button-gradient-end));
    box-shadow: 0 5px 15px rgba(106, 75, 196, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.modal button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(106, 75, 196, 0.3);
}

.modal button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: shine 4s infinite;
    z-index: 1;
}

.logo img {
    background: var(--color-accent-1);
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Добавляем анимацию "движения поезда" для некоторых элементов */
@keyframes train-motion {
    0% {
        transform: translateX(-2px);
    }
    50% {
        transform: translateX(2px);
    }
    100% {
        transform: translateX(-2px);
    }
}

.logo {
    animation: train-motion 3s infinite ease-in-out;
}

/* Создаем эффект "рун" на некоторых элементах */
.button::before,
.main-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path d="M15,5 L15,25 M10,10 L20,20 M20,10 L10,20" stroke="%23FFFFFF" stroke-width="0.5" opacity="0.1"/></svg>');
    pointer-events: none;
}

/* Анимация "портала" для некоторых контейнеров */
@keyframes portal-glow {
    0% {
        box-shadow: 0 0 5px rgba(157, 113, 232, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(157, 113, 232, 0.5);
    }
    100% {
        box-shadow: 0 0 5px rgba(157, 113, 232, 0.3);
    }
}

.enter-wrapper,
.contact-wrapper {
    animation: portal-glow 4s infinite ease-in-out;
}

/* Эффект сияющего портала для картинок */
.img-col {
    position: relative;
    z-index: 1;
}

.img-col::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background:
        linear-gradient(45deg, transparent 40%, var(--color-accent-1) 45%, transparent 50%),
        linear-gradient(-45deg, transparent 40%, var(--color-accent-1) 45%, transparent 50%);
    border-radius: 15px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.img-col:hover::before {
    opacity: 0.5;
    animation: portal-rotation 3s linear infinite;
}

@keyframes portal-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Эффект руны для ссылок в футере */
.footer-links-wrapper a {
    position: relative;
    display: inline-block;
    padding: 0 5px;
}

.footer-links-wrapper a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M5,0 L5,10 M0,5 L10,5" stroke="%239D71E8" stroke-width="0.5"/></svg>');
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-links-wrapper a:hover::before {
    opacity: 0.8;
    transform: translateX(-50%) rotate(45deg);
}

/* Добавляем эффект портала для header-cont */
.header-cont {
    position: relative;
}

.header-cont::after {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 10px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--color-accent-1) 20%,
        var(--color-heading) 50%,
        var(--color-accent-1) 80%,
        transparent 100%);
    border-radius: 5px;
    filter: blur(3px);
    opacity: 0.7;
    animation: portal-pulse 3s infinite alternate;
}

@keyframes portal-pulse {
    0% {
        width: 100px;
        opacity: 0.5;
    }
    100% {
        width: 150px;
        opacity: 0.8;
    }
}

/* Эффект паровоза с паром для кнопок */
button.spin::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -20%;
    width: 40%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

button.spin:hover::before {
    opacity: 0.3;
    animation: steam-puff 1.5s infinite alternate;
}

@keyframes steam-puff {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0.2;
    }
    100% {
        transform: translateY(-10px) scale(1.2);
        opacity: 0.4;
    }
}