@import url('https://fonts.googleapis.com/css2?family=Ephesis&family=Noto+Znamenny+Musical+Notation&display=swap');

 body {
     font-family: 'Noto Znamenny Musical Notation', cursive;
     font-weight: 400;
     line-height: 1.5;
     color: rgb(62, 59, 59);
 }

 .logo {
     font-family: 'Ephesis', cursive;
     font-size: 1.2rem;
     line-height: 1.5;
     color: rgb(62, 59, 59);
 }

 :where([class^="ri-"])::before {
     content: "\f3c2";
 }

 .hero-bg {
     background-image: url('hero.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 .mobile-menu {
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 }

 .mobile-menu.open {
     transform: translateX(0);
 }

 /* Модальне вікно для гри */
 .game-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.9);
     z-index: 9999;
     display: none;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .game-modal.active {
     display: flex;
     opacity: 1;
 }

 .game-modal-content {
     width: 100%;
     height: 100%;
     position: relative;
     display: flex;
     flex-direction: column;
 }

 .game-iframe {
     width: 100%;
     height: 100%;
     border: none;
     background: #000;
 }

 .game-close-btn {
     position: absolute;
     top: 20px;
     right: 20px;
     width: 50px;
     height: 50px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     color: white;
     font-size: 24px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     z-index: 10000;
 }

 .game-close-btn:hover {
     background-color: rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
     transform: scale(1.1);
 }

 .game-loading {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;
     font-size: 18px;
     z-index: 10001;
 }

 /* Анімація завантаження */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .loading-spinner {
     width: 40px;
     height: 40px;
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top: 4px solid white;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 20px;
 }