/* Базовые настройки и цвета */
            :root {
                --bg-color: #386781;
                --dark-shadow: #1e3a4b;
                --orange: #ff8232;
                --text-light: #ffffff;
                --text-dark: #000000;
                --border-color: rgba(255, 255, 255, 0.8);
            }

            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            }

            body {
                background-color: #2b4f63;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
                padding: 20px;
            }

            /* Главный контейнер сайта */
            .site-container {
                background-color: var(--bg-color);
                width: 100%;
                max-width: 1200px;
                box-shadow: -20px 20px 0px var(--dark-shadow);
                border: 1px solid var(--border-color);
                display: flex;
                flex-direction: column;
            }

            .header {
                display: grid;
                grid-template-columns: 1fr 300px; /* Кнопка строго 300px */
                align-items: stretch;
                border-bottom: 1px solid var(--border-color);
                height: 80px;
            }

            .logo-nav-wrapper {
                display: flex;
                align-items: center;
            }

            .logo {
                font-size: 42px;
                font-weight: bold;
                color: var(--text-light);
                text-shadow: 4px 4px 0px var(--dark-shadow);
                padding-left: 40px;
                padding-right: 40px; /* Отступ между логотипом и началом ссылок */
                cursor: pointer;
            }

            .logo svg {
                height: 42px;
            }

            .nav {
                display: flex;
                flex-grow: 1;
                justify-content: space-evenly;
            }

            .nav a {
                color: var(--text-light);
                text-decoration: none;
                font-size: 16px;
                transition: opacity 0.2s;
            }

            .nav a:hover {
                opacity: 0.7;
            }

            .btn-order {
                background-color: var(--orange);
                color: var(--text-dark);
                border: none;
                border-left: 1px solid var(--border-color);
                width: 100%; /* Занимает всю ячейку сетки (300px) */
                font-weight: bold;
                font-size: 16px;
                cursor: pointer;
                transition: background-color 0.2s;
                text-transform: uppercase;
            }

            .btn-order:hover {
                background-color: #e5752d;
            }

            /* Основной контент (Grid) */
            .main-content {
                display: grid;
                grid-template-columns: 1fr 300px; /* Сайдбар строго 300px */
                min-height: 500px;
            }

            /* Левая колонка */
            .left-column {
                display: flex;
                flex-direction: column;
                border-right: 1px solid var(--border-color);
            }

            /* Секция с играми (скроллируемая область) */
            .games-section {
                height: 420px;
                overflow-y: scroll;
                overflow-x: hidden;
                border-bottom: 1px solid var(--border-color);
            }

            /* СТИЛИЗАЦИЯ БЕЛОГО СЛАЙДЕРА (SCROLLBAR) */
            .games-section::-webkit-scrollbar {
                width: 24px;
            }

            .games-section::-webkit-scrollbar-track {
                background: transparent;
                border-left: 1px solid var(--border-color);
            }

            .games-section::-webkit-scrollbar-thumb {
                background-color: #ffffff;
                border-radius: 0;
                border-left: 1px solid var(--border-color);
            }

            /* Сетка для карточек (максимум 3 в ряд) */
            .games-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 40px;
                padding: 40px;
                padding-bottom: 60px;
            }

            /* Карточка игры */
            .game-card {
                background-color: var(--orange);
                text-decoration: none;
                color: var(--text-dark);
                box-shadow: 15px 15px 0px var(--dark-shadow);
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
                display: flex;
                flex-direction: column;
            }

            .game-card:hover {
                transform: translate(5px, 5px);
                box-shadow: 10px 10px 0px var(--dark-shadow);
            }

            /* Имитация обложек */
            .card-cover {
                height: 180px;
                background-color: #555;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                padding: 10px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            }

            .card-cover img {
                width: 100%;
                height: 100%;
            }

            .cover-1 {
                background: linear-gradient(135deg, #4b8aa8, #2a5a73);
                color: white;
            }
            .cover-1 h3 {
                font-size: 24px;
                text-transform: uppercase;
                text-shadow: 2px 2px 0 #d9534f;
                line-height: 1.1;
            }

            .cover-2 {
                background: #c18e5a;
                color: white;
            }
            .cover-2 h3 {
                font-size: 22px;
                font-family: "Courier New", Courier, monospace;
                text-shadow: 2px 2px 0 black;
                transform: rotate(-5deg);
            }

            .cover-3 {
                background-color: var(--orange);
            }
            .star-shape {
                background-color: var(--bg-color);
                color: white;
                padding: 30px 20px;
                clip-path: polygon(
                    50% 0%,
                    61% 35%,
                    98% 35%,
                    68% 57%,
                    79% 91%,
                    50% 70%,
                    21% 91%,
                    32% 57%,
                    2% 35%,
                    39% 35%
                );
                font-size: 14px;
            }

            .cover-4 {
                background: linear-gradient(135deg, #8a4ba8, #5a2a73);
                color: white;
            }
            .cover-4 h3 {
                font-size: 22px;
                text-transform: uppercase;
                text-shadow: 2px 2px 0 black;
            }

            .card-info {
                padding: 20px 15px;
                flex-grow: 1;
            }

            .card-info h4 {
                font-size: 16px;
                margin-bottom: 5px;
            }

            .card-info p {
                font-size: 12px;
                opacity: 0.8;
            }

            /* Нижний текстовый блок под играми */
            .bottom-text {
                padding: 30px 40px;
                color: var(--text-light);
                font-size: 14px;
                line-height: 1.5;
                height: 150px;
                overflow-y: auto;
            }

            /* Правая колонка (Сайдбар) */
            .sidebar {
                padding: 40px 30px;
                color: var(--text-light);
                font-size: 14px;
                line-height: 1.5;
            }

            /* Responsive iframe container */
            .iframe-container {
                position: relative;
                width: 100%;
                padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
                height: 0;
                overflow: hidden;
                max-width: 100%;
                background: #000;
            }

            .iframe-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }

            .error-message {
                padding: 20px;
                background-color: #ff4d4d;
                color: white;
                margin-top: 20px;
                border: 1px solid white;
                text-align: center;
                font-weight: bold;
            }

            /* Адаптивность для мобильных устройств */
            @media (max-width: 1000px) {
                .games-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media (max-width: 800px) {
                .header {
                    display: flex;
                    flex-direction: column;
                    height: auto;
                }
                .logo-nav-wrapper {
                    flex-direction: column;
                    padding: 20px;
                    gap: 20px;
                }
                .logo {
                    padding: 0;
                }
                .nav {
                    justify-content: center;
                    gap: 40px;
                }
                .btn-order {
                    border-left: none;
                    border-top: 1px solid var(--border-color);
                    padding: 20px;
                }

                .main-content {
                    grid-template-columns: 1fr;
                }
                .left-column {
                    border-right: none;
                }
                .games-grid {
                    grid-template-columns: 1fr;
                }
            }