html,
   body {
       overflow: hidden;
       /* Запрещает скролл самого body */
       touch-action: none;
       /* Отключает дефолтные жесты браузера */
   }

   .main-apps {
       color: white;
       position: relative;
       border: none;
       border-radius: 15px;
       cursor: pointer;
       background-color: rgba(255, 255, 255, 0.05);

       width: 100%;
       /* Растягивается на всю ширину родителя */
       max-width: 150px;
       /* Но не больше 140px */
       aspect-ratio: 1 / 1;

       background-size: cover;
       background-position: center;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
       outline: none;

       /* Флекс-контейнер для вертикального расположения */
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       /* Текст внизу */
       align-items: center;
       /* Центрирование по горизонтали */

       padding-bottom: 12px;
       transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
       overflow: hidden;
       text-decoration: none;
   }

   .main-apps:hover {
       transform: translateY(-5px) scale(1.06);
       background-color: rgba(10, 15, 30, 0.85);
   }

   /* Слой затемнения, чтобы текст всегда читался */
   .main-apps::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
       z-index: 1;
   }

   /* Стили для текста названия */
   .app-name {
       position: relative;
       z-index: 2;
       font-size: 18px;
       font-weight: 700;
       text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
       text-align: center;
       width: 100%;
       padding: 0 5px;

       white-space: normal;
       /* Разрешаем перенос строк */
       word-wrap: break-word;
       /* Разрываем длинные слова, если они не влезают */
       overflow-wrap: break-word;
       /* Современный вариант переноса слов */
       display: -webkit-box;
       /* Опционально: ограничение по количеству строк */
       -webkit-line-clamp: 2;
       /* Например, максимум 2 строки, потом многоточие */
       -webkit-box-orient: vertical;
       overflow: hidden;
   }


   #bombastik-button {
       background-image: url('/games/static/images/bomb.png');
       /* box-shadow: 0 0 20px #ff9100; */
   }

   #tomigochi-button {
       background-image: url('/home/static/images/tomigochi-bg.png');
       box-shadow: 0 0 20px #ff9100;
   }

   #chain-reaction-button {
       background-image: url('/home/static/images/chain-war-bg.jpg');
       box-shadow: -10px 0 20px red, 10px 0 20px blue;
   }

   #miner-button {
       background-image: url('/home/static/images/miner-bg.jpg');
       box-shadow: 0 0 20px #0026ff;
   }

   #gear-runner-button {
       background-image: url('/home/static/images/gear_runner-bg.jpg');
       box-shadow: 0px 0px 30px red, inset 0px 0px 50px red
           /* , 15px 15px 20px rgb(0, 0, 0) */
       ;
       white-space: normal;
       word-wrap: break-word;
       overflow-wrap: break-word;
       word-break: break-word;
   }

   #kopiKoshka-button {
       background-image: url('/home/static/images/kopiKoshka-bg.png');
       box-shadow: 0px 0px 20px rgb(129, 99, 0)
           /* , 15px 15px 20px rgb(0, 0, 0) */
       ;
       background-color: #1a1a10;
   }

   #colonia-button {
       background-image: url('/home/static/images/colonia-bg.png');
   }

   #hydronet-button {
       background-image: url('/home/static/images/hydronet-bg.png');
       /* Анимация идет по кругу (infinite) без реверса, чтобы цвета постоянно перетекали */
       animation: emerald-flow 6s infinite alternate ease-in-out;
   }
 @keyframes emerald-flow {
            0% {
                box-shadow: 0 0 20px #10b981, inset 0 0 15px #0f172a;
            }
            50% {
                box-shadow: 0 0 40px #2dd4bf, inset 0 0 20px #064e3b;
            }
            100% {
                box-shadow: 0 0 20px #0f172a, inset 0 0 10px #10b981;
            }
        }

   #evo-green-button {
       background-image: url('/home/static/images/evo-tree-bg.png');
       /* text-shadow: none; */
       /* background: none; */
   }

   #elias-button {
       background-image: url('/home/static/images/elias-bg.jpg');
   }

   #svoya_igra-button {
       background-image: url('/home/static/images/svoya-igra-bg.jpg');
   }

   #daibeerchik-button {
       background-image: url('/home/static/images/daibeerchik-bg.jpg');
   }

   #karta-button {
       background-image: url('/home/static/images/karta-bg.jpg');
       box-shadow: inset 0 0 30px #4863ff;
   }