:root {
       --bg-dark: #1a1a1a;
       --bg-card: #252525;
       --bg-card-hover: #2c2a27;
       --text-main: #e0e0e0;
       --text-muted: #a0a0a0;
       --accent-beige: #c2b280;
       --accent-olive: #4a5320;
       --accent-olive-hover: #5c662a;
       --border-color: #333333;
       --font-head: 'Playfair Display', serif;
       --font-body: 'Inter', sans-serif;
       --transition: all 0.3s ease;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: var(--font-body);
       background-color: var(--bg-dark);
       color: var(--text-main);
       line-height: 1.6;
       overflow-x: hidden;
   }


   body.modal-open {
       overflow: hidden;
   }

   h1,
   h2,
   h3,
   h4,
   h5 {
       font-family: var(--font-head);
       font-weight: 600;
       color: var(--accent-beige);
   }

   a {
       text-decoration: none;
       color: var(--text-main);
       transition: var(--transition);
   }

   a:hover {
       color: var(--accent-beige);
   }

   img {
       max-width: 100%;
       height: auto;
       display: block;
   }

   .container {
       width: 90%;
       max-width: 1200px;
       margin: 0 auto;
       padding: 80px 0;
   }

   .btn {
       display: inline-block;
       background-color: var(--accent-olive);
       color: #fff;
       padding: 12px 28px;
       border: none;
       border-radius: 4px;
       font-size: 1rem;
       cursor: pointer;
       transition: var(--transition);
       text-align: center;
       font-family: var(--font-body);
       font-weight: 500;
   }

   .btn:hover {
       background-color: var(--accent-olive-hover);
   }

   .section-title {
       text-align: center;
       font-size: 2.5rem;
       margin-bottom: 20px;
   }

   .section-subtitle {
       text-align: center;
       color: var(--text-muted);
       margin-bottom: 50px;
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
   }

   header.main-header {
       background-color: rgba(26, 26, 26, 0.95);
       position: fixed;
       top: 0;
       width: 100%;
       z-index: 100;
       border-bottom: 1px solid var(--border-color);
       padding: 15px 0;
   }

   .nav-container {
       width: 90%;
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .logo {
       font-family: var(--font-head);
       font-size: 1.5rem;
       color: var(--accent-beige);
       font-weight: 600;
   }

   .nav-links {
       display: flex;
       list-style: none;
       gap: 30px;
       align-items: center;
   }

   .menu-toggle {
       display: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--text-main);
   }

   .hero-section {
       padding: 150px 0 100px;
       display: flex;
       align-items: center;
       gap: 50px;
       background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
   }

   .hero-content {
       flex: 1;
   }

   .hero-title {
       font-size: 3.5rem;
       line-height: 1.2;
       margin-bottom: 20px;
   }

   .hero-text {
       font-size: 1.1rem;
       color: var(--text-muted);
       margin-bottom: 30px;
   }

   .hero-image {
       flex: 1;
       border-radius: 8px;
       overflow: hidden;
   }

   .about-section {
       background-color: var(--bg-card);
       text-align: center;
   }

   .about-text {
       max-width: 800px;
       margin: 0 auto;
       font-size: 1.1rem;
       color: var(--text-muted);
   }

   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 30px;
   }

   .feature-card {
       background-color: var(--bg-card);
       padding: 40px 30px;
       border-radius: 8px;
       text-align: center;
       transition: var(--transition);
       border: 1px solid var(--border-color);
   }

   .feature-card:hover {
       transform: translateY(-5px);
       background-color: var(--bg-card-hover);
   }

   .feature-icon {
       font-size: 2.5rem;
       color: var(--accent-beige);
       margin-bottom: 20px;
   }

   .feature-title {
       font-size: 1.2rem;
       margin-bottom: 15px;
   }

   .games-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
       gap: 40px;
   }

   .game-card {
       background-color: var(--bg-card);
       border-radius: 8px;
       overflow: hidden;
       border: 1px solid var(--border-color);
       display: flex;
       flex-direction: column;
   }

   .game-image-placeholder {
       width: 100%;
       height: 450px;
       background-color: #333;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-muted);
       position: relative;
   }

   .game-image-placeholder img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       top: 0;
       left: 0;
   }

   .frame-placeholder {
       padding: 10px;
       background: #111;
       text-align: center;
       font-size: 0.85rem;
       color: var(--text-muted);
       border-bottom: 1px solid var(--border-color);
   }

   .game-content {
       padding: 30px;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
   }

   .game-title {
       font-size: 1.5rem;
       margin-bottom: 15px;
   }

   .game-desc {
       color: var(--text-muted);
       margin-bottom: 25px;
       flex-grow: 1;
   }

   .how-section {
       background-color: var(--bg-card);
   }

   .steps-container {
       display: flex;
       justify-content: space-between;
       gap: 30px;
       text-align: center;
   }

   .step {
       flex: 1;
   }

   .step-icon {
       width: 80px;
       height: 80px;
       background-color: var(--bg-dark);
       border: 2px solid var(--accent-olive);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       font-size: 2rem;
       color: var(--accent-beige);
   }

   .contact-wrapper {
       display: flex;
       gap: 50px;
   }

   .contact-form-area {
       flex: 2;
       background-color: var(--bg-card);
       padding: 40px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
   }

   .address-area {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 30px;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .form-control {
       width: 100%;
       padding: 12px 15px;
       background-color: var(--bg-dark);
       border: 1px solid var(--border-color);
       color: var(--text-main);
       border-radius: 4px;
       font-family: var(--font-body);
   }

   .form-control:focus {
       outline: none;
       border-color: var(--accent-beige);
   }

   textarea.form-control {
       resize: vertical;
       min-height: 120px;
   }

   .form-note {
       font-size: 0.85rem;
       color: var(--text-muted);
       margin-top: 15px;
   }

   .address-card {
       background-color: var(--bg-card);
       padding: 30px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
   }

   .address-item {
       display: flex;
       align-items: flex-start;
       gap: 15px;
       margin-bottom: 20px;
   }

   .address-item:last-child {
       margin-bottom: 0;
   }

   .address-icon {
       color: var(--accent-beige);
       font-size: 1.2rem;
       margin-top: 4px;
   }

   .faq-section {
       background-color: var(--bg-card);
       margin-top: 80px;
   }

   .faq-container {
       max-width: 800px;
       margin: 0 auto;
   }

   .faq-item {
       margin-bottom: 15px;
       border: 1px solid var(--border-color);
       border-radius: 4px;
       overflow: hidden;
   }

   .faq-question {
       background-color: var(--bg-dark);
       padding: 20px;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-weight: 500;
       transition: var(--transition);
   }

   .faq-question:hover {
       color: var(--accent-beige);
   }

   .faq-icon {
       transition: transform 0.3s ease;
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       background-color: var(--bg-card);
       transition: max-height 0.3s ease;
   }

   .faq-answer-inner {
       padding: 20px;
       color: var(--text-muted);
       border-top: 1px solid var(--border-color);
   }

   .faq-item.active .faq-answer {
       max-height: 300px;
   }

   .faq-item.active .faq-icon {
       transform: rotate(180deg);
   }

   footer {
       background-color: #111;
       padding: 60px 0 30px;
       border-top: 1px solid var(--border-color);
   }

   .footer-content {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       gap: 25px;
   }

   .footer-nav {
       display: flex;
       gap: 20px;
       list-style: none;
   }

   .age-gate-badge {
       background-color: #d9534f;
       color: white;
       font-weight: bold;
       padding: 8px 12px;
       border-radius: 4px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 1.2rem;
   }

   .disclaimer-text {
       color: var(--text-muted);
       font-size: 0.85rem;
       max-width: 800px;
       margin: 0 auto;
   }

   .copyright {
       color: #666;
       font-size: 0.85rem;
       margin-top: 20px;
   }

   .overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: center;
       visibility: visible;
       opacity: 1;
       transition: visibility 0s, opacity 0.5s linear;
   }

   .overlay.hidden {
       visibility: hidden;
       opacity: 0;
   }

   .modal-box {
       background-color: var(--bg-card);
       padding: 50px 40px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
       text-align: center;
       max-width: 500px;
       width: 90%;
   }

   .modal-box h2 {
       margin-bottom: 20px;
   }

   .modal-box p {
       color: var(--text-muted);
       margin-bottom: 30px;
   }

   .modal-actions {
       display: flex;
       gap: 15px;
       justify-content: center;
   }

   .btn-outline {
       background: transparent;
       border: 1px solid var(--text-muted);
       color: var(--text-main);
   }

   .btn-outline:hover {
       background: rgba(255, 255, 255, 0.1);
   }

   .cookie-banner {
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       background-color: var(--bg-card);
       border-top: 1px solid var(--border-color);
       padding: 20px;
       z-index: 900;
       display: flex;
       justify-content: space-between;
       align-items: center;
       transform: translateY(0);
       transition: transform 0.5s ease;
   }

   .cookie-banner.hidden {
       transform: translateY(100%);
   }

   .cookie-text {
       font-size: 0.9rem;
       color: var(--text-muted);
       max-width: 800px;
   }

   .cookie-actions {
       display: flex;
       gap: 10px;
   }

   @media (max-width: 992px) {
       .hero-section {
           flex-direction: column;
           text-align: center;
           padding: 120px 0 60px;
       }

       .contact-wrapper {
           flex-direction: column;
       }
   }

   @media (max-width: 768px) {
       .nav-links {
           position: absolute;
           top: 100%;
           left: 0;
           width: 100%;
           background-color: var(--bg-card);
           flex-direction: column;
           padding: 20px 0;
           gap: 20px;
           border-bottom: 1px solid var(--border-color);
           display: none;
       }

       .nav-links.active {
           display: flex;
       }

       .menu-toggle {
           display: block;
       }

       .steps-container {
           flex-direction: column;
           gap: 50px;
       }

       .cookie-banner {
           flex-direction: column;
           text-align: center;
           gap: 15px;
       }

       .games-grid {
           grid-template-columns: 1fr;
       }
   }

   .pages {
       padding: 100px 0 0 0;
   }

   .pages h1 {
       font-family: var(--font-head);
       font-size: 3rem;
       color: var(--accent-beige);
       margin-bottom: 10px;
       text-align: center;
   }

   .pages .last-updated {
       text-align: center;
       color: var(--text-muted);
       font-size: 0.9rem;
       margin-bottom: 50px;
       border-bottom: 1px solid var(--border-color);
       padding-bottom: 30px;
   }

   .pages h2 {
       font-family: var(--font-head);
       font-size: 1.8rem;
       color: var(--accent-beige);
       margin-top: 50px;
       margin-bottom: 20px;
   }

   .pages p {
       color: var(--text-muted);
       margin-bottom: 20px;
   }

   .pages ul {
       color: var(--text-muted);
       margin-bottom: 20px;
       margin-left: 20px;
   }

   .pages li {
       margin-bottom: 10px;
   }

   .pages .policy-card {
       background-color: var(--bg-card);
       padding: 40px;
       border-radius: 8px;
       border: 1px solid var(--border-color);
       margin-top: -20px;
   }