:root {
        --bg-main: #04051f;
        --bg-card: #10153a;
        --text-main: #ffffff;
        --text-muted: #98a0ca;
        --accent: #ff7a10;
        --accent-dark: #de6200;
        --stroke: rgba(255, 255, 255, 0.18);
  }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: "Geologica", sans-serif;
        background: #070714 url("../images/bg-1.png") center/cover no-repeat;
        color: var(--text-main);
        position: relative;
      }

      body::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 250px;
        background: url("../images/particles.png") center/cover no-repeat;
        z-index: -1;
      }

      body::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 250px;
        background: url("../images/bottom_light.png") center/cover no-repeat;
        z-index: -1;
      }

      .page {
        min-height: 100vh;
        overflow: hidden;
        padding: 20px 0 0;
      }

      .wrapper {
        width: min(100% - 24px, 1200px);
        margin: 0 auto;
      }

      .logo {
        width: 152px;
        max-width: 100%;
      }

      .hero h1 {
        margin: 30px 0 10px;
        font-weight: 900;
        font-size: clamp(23px, 6vw, 40px);
        line-height: 1.05;
        max-width: 620px;
      }

      .promo {
        display: inline-block;
        font-weight: 900;
        font-size: clamp(30px, 6vw, 42px);
        line-height: 1;
        color: #fff;
        padding: 10px 22px 12px 16px;
        background: url("../images/rubber.png") no-repeat;
        clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 3% 50%);
        margin-bottom: 30px;
        background-size: contain;
        width: 100%;
        height: 100%;
        max-width: 440px;
        text-align: center;
      }

      .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .sections-gap {
        margin-top: 50px;
      }

      .btn-main {
        border: 0;
        border-radius: 12px;
        background: #FF6C0A;
        color: #fff;
        font-size: 16px;
        font-weight: 800;
        line-height: 1;
        padding: 14px 24px;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .btn-main:hover {
        background: linear-gradient(180deg, #ff932f 0%, #ff7c19 100%);
        color: #fff;
      }

      .promo-code {
        border: 2px dashed var(--stroke);
        border-radius: 12px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(22px, 2vw, 22px);
        font-weight: 900;
        letter-spacing: 0.02em;
        color: #fff;
        background: rgba(17, 20, 55, 0.6);
        width: 100%;
        transition: color 0.2s ease;
      }

      .promo-code:hover {
        cursor: pointer;
      }

      .promo-code.is-copied {
        color: #FF6C0A;
      }

      .copy-icon {
        display: inline-flex;
        width: 18px;
        height: 18px;
        margin-left: 10px;
      }

      .steam-icon {
        display: inline-flex;
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }

      .hero-figure img {
        width: 100%;
        height: auto;
        object-fit: contain;
      }

      .hero-figure {
        width: 100%;
        max-width: 510px;
        margin-left: auto;
        position: absolute;
      }

      .modes-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      /*.mode-card {*/
      /*  position: relative;*/
      /*  display: flex;*/
      /*  align-items: flex-end;*/
      /*  justify-content: center;*/
      /*  min-height: 195px;*/
      /*  border-radius: 14px;*/
      /*  overflow: hidden;*/
        /*border: 1px solid rgba(255, 255, 255, 0.08);*/
      /*  box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95);*/
      /*  padding: 20px;*/
      /*  background-color: var(--bg-card);*/
      /*  background-position: center;*/
      /*  background-size: cover;*/
      /*  background-repeat: no-repeat;*/
      /*}*/

      /*.mode-card span {*/
      /*  position: relative;*/
      /*  z-index: 1;*/
      /*  font-size: clamp(17px, 3vw, 24px);*/
      /*  font-weight: 800;*/
      /*  color: var(--text-main);*/
      /*}*/

      /*.mode-cases {*/
      /*  background-image: url("../images/modes/cases.png");*/
      /*}*/

      /*.mode-upgrades {*/
      /*  background-image:  url("../images/modes/upgrades.png");*/
      /*}*/

      /*.mode-battles {*/
      /*  background-image: url("../images/modes/battles.png");*/
      /*}*/

      /*.mode-cards {*/
      /*  background-image: url("../images/modes/cards.png");*/
      /*}*/

      /*.mode-contracts {*/
      /*  background-image: url("../images/modes/contracts.png");*/
      /*}*/

      /*.mode-events {*/
      /*  background-image: url("../images/modes/events.png");*/
      /*}*/
      
      
      /* Основний контейнер картки */
        .mode-card {
          position: relative;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          min-height: 195px;
          border-radius: 14px;
          overflow: hidden; /* Обрізає картинку, коли вона збільшується */
          padding: 20px;
          background-color: var(--bg-card);
          text-decoration: none;
          /* Внутрішня тінь залишається на верхньому шарі поверх картинки */
          box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95);
        }
        
        /* Шар для фонової картинки */
        .mode-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          z-index: 0;
          transition: transform 0.4s ease-out, filter 0.4s ease;
        }
        
        /* Ефект при наведенні на всю картку */
        .mode-card:hover::before {
          transform: scale(1.1); /* Збільшення фону */
          filter: brightness(1.2); /* Легке освітлення фону */
        }
        
        /* Стилі тексту (span) */
        .mode-card span {
          position: relative;
          z-index: 1; /* Текст завжди над фоном */
          font-size: clamp(17px, 3vw, 24px);
          font-weight: 800;
          color: var(--text-main);
          transition: transform 0.3s ease;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Покращує читабельність */
        }
        
        .mode-card:hover span {
          transform: translateY(-3px); /* Легкий підйом тексту при наведенні */
        }
        
        /* Підключення ваших картинок до шару ::before */
        .mode-cases::before { background-image: url("../images/modes/cases.png");box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95); }
        .mode-upgrades::before { background-image: url("../images/modes/upgrades.png");box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95); }
        .mode-battles::before { background-image: url("../images/modes/battles.png");box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95); }
        .mode-cards::before { background-image: url("../images/modes/cards.png");box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95); }
        .mode-contracts::before { background-image: url("../images/modes/contracts.png"); box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95);}
        .mode-events::before { background-image: url("../images/modes/events.png");box-shadow: inset 0 -65px 60px rgba(6, 7, 32, 0.95); }

      .section-title {
        margin: 50px 0 25px;
        font-weight: 900;
        font-size: clamp(20px, 5vw, 42px);
        line-height: 1.06;
        max-width: 1030px;
      }

      .free-cases {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 6px;
      }

      .free-case {
        position: relative;
        background: linear-gradient(180deg, rgba(21, 27, 70, 0.92) 0%, rgba(16, 18, 53, 0.96) 100%);
        border-radius: 14px;
        min-height: 184px;
        flex: 0 0 220px;
        overflow: hidden;
        padding: 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        max-width: 160px;
      }

      .free-cases {
        position: relative;
      }

      .free-case img {
        width: 100%;
        max-width: 165px;
        margin: 0 auto auto;
        display: block;
      }

      .free-case.locked {
          background: #151529 url("../images/locked.png") no-repeat;
          background-size: contain;
          
      }

      .free-case a {
        width: 100%;
        border: 0;
        border-radius: 12px;
        height: 44px;
        font-size: 16px;
        font-weight: 800;
        max-width: none;
      }

      .free-case .timer {
        margin-top: 12px;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #5b6297;
        background: hsl(233deg 25% 47% / 35%);
        border-radius: 12px;
        padding: 11px 10px 11px 10px;
        width: 100%;
        margin-bottom: 0;
      }

      .join {
        margin-top: 42px;
        margin-bottom: 50px;
      }

      .join h2 {
        margin: 0 0 18px;
        max-width: 620px;
        font-size: clamp(21px, 5.5vw, 42px);
        line-height: 1.03;
        font-weight: 900;
      }

      .join-weapon {
        width: 100%;
        max-width: 620px;
        margin-left: auto;
        display: block;
        opacity: 0.98;
      }

      .footer {
        margin-top: 24px;
        font-size: 14px;
        padding-bottom: 50px;
        color: rgba(255, 255, 255, 0.66);
      }

      .footer a {
        color: rgba(255, 255, 255, 0.66);
      }

      .cookie-banner {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 20px;
        border-radius: 12px;
        background: rgba(16, 21, 58, 0.8);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        max-width: 90%;
        left: 0;
        right: 0;
        margin: 0 auto;
      }

      .cookie-banner p {
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
        color: rgba(255, 255, 255, 0.92);
      }

      .cookie-banner.is-hidden {
        display: none;
      }

      .cookie-accept {
        min-width: auto;
        white-space: nowrap;
        padding: 12px 16px;
      }

      @media (min-width: 768px) {
        .page {
          padding: 28px 0 0;
        }

        .wrapper {
          width: min(100% - 32px, 1200px);
        }

        .hero h1 {
          max-width: 650px;
        }

        .hero-actions {
          max-width: none;
          flex-direction: row;
          align-items: stretch;
        }

        .promo-code {
          width: auto;
          min-width: 226px;
          padding: 0 10px;
          min-height: 64px;
        }

        .modes-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 12px;
        }

        .mode-card {
          min-height: 232px;
        }

        .free-cases {
          gap: 12px;
        }

        .free-case {
          min-height: 220px;
          flex-basis: 250px;
          max-width: none;
        }

        .free-case img {
          max-width: 209px;
        }

      }

      @media (min-width: 1200px) {
          .cookie-banner {
            max-width: 50%;
          }
          .hero-actions {
            max-width: 360px;
          }
          .btn-main {
            max-width: max-content;
            min-width: 200px;
          }
          .hero {
            min-height: 470px;
          }
          .sections-gap {
            margin-top: -30px;
          }
          body::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 512px;
            background: url("../images/particles.png") center/cover no-repeat;
            z-index: -1;
          }

          body::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 512px;
            background: url("../images/bottom_light.png") center/cover no-repeat;
            z-index: -1;
          }
        .free-cases::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 256px;
          height: 100%;
          background: url("../images/fade.png") no-repeat;
          z-index: 1;
          border-radius: 12px;
          pointer-events: none;
        }
        .page {
          padding: 34px 0 0;
        }

        .modes-grid {
          grid-template-columns: repeat(4, minmax(0, 1fr));
          grid-auto-rows: 315px;
          gap: 12px;
        }

        .mode-card {
          min-height: 0;
        }

        .mode-cases,
        .mode-battles {
          grid-row: span 2;
        }

        .section-title {
          margin-top: 50px;
        }

        .free-cases {
          display: grid;
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 14px;
          overflow: visible;
          padding-bottom: 0;
        }

        .free-case {
          min-height: 250px;
          flex: initial;
        }

        .free-case button {
          height: 50px;
          font-size: 19px;
        }

        .join {
          margin-top: 130px;
          margin-bottom: 0;
        }
      }

      @media (min-width: 1400px) {
        .hero h1 {
          max-width: 700px;
        }

        .modes-grid {
          grid-auto-rows: 315px;
          gap: 14px;
        }

        .mode-card {
          border-radius: 12px;
        }

        .free-case {
          border-radius: 12px;
        }

        .join-weapon {
          max-width: 700px;
          margin-top: -150px;
        }
      }

      @media (min-width: 1920px) {
        .page {
          padding-top: 44px;
          padding-bottom: 48px;
        }

        .hero {
          min-height: 500px;
        }

        .modes-grid {
          gap: 16px;
        }

        .free-cases {
          gap: 16px;
        }

        .section-title {
          margin-top: 70px;
        }
      }

      @media (max-width: 575px) {
        .cookie-banner {
          flex-direction: column;
          align-items: stretch;
        }
      }