Вы правы — на узких экранах вкладки сжимаются и текст накладывается. Я исправил: теперь вкладки переносятся на несколько строк, размер шрифта уменьшен, кнопки получают минимальную ширину и не перекрывают друг друга.
Обновите ваш файл, заменив блок стилей для .tabs и .tab на следующий (или просто скопируйте весь код ниже):
🔧 Исправленный CSS для вкладок (вставьте вместо старых правил)
```css
.tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 14px;
background: rgba(0,0,0,0.4);
border-radius: 40px;
padding: 6px 8px;
border: 1px solid #ffd70022;
justify-content: center;
}
.tab {
flex: 0 1 auto;
min-width: 54px;
text-align: center;
padding: 6px 10px;
border-radius: 30px;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
background: transparent;
color: #b8a88a;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
text-transform: uppercase;
min-height: 40px;
touch-action: manipulation;
position: relative;
z-index: 1;
white-space: nowrap;
}
.tab.active {
color: #ffd700;
box-shadow: 0 0 30px #ffd70022, inset 0 0 20px #ffd70011;
}
.tab.active::after {
content: '';
position: absolute;
inset: 0;
border-radius: 30px;
background: linear-gradient(135deg,#ffd70033,#8b000066);
opacity: 1;
z-index: -1;
transition: opacity 0.3s ease;
}
.tab:not(.active)::after {
content: '';
position: absolute;
inset: 0;
border-radius: 30px;
background: linear-gradient(135deg,#ffd70033,#8b000066);
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease;
}
.tab:hover:not(.active) {
color: #ffd700;
transform: translateY(-2px);
}
```
И добавьте в медиа-запрос для мобильных:
```css
@media (max-width: 700px) {
.tabs {
gap: 3px;
padding: 4px 6px;
border-radius: 30px;
}
.tab {
font-size: 11px;
padding: 4px 8px;
min-width: 44px;
min-height: 36px;
}
}
@media (max-width: 450px) {
.tab {
font-size: 10px;
padding: 3px 6px;
min-width: 38px;
min-height: 32px;
}
}
```
---
📄 Полный исправленный файл (все изменения уже внутри)
Я обновил весь код с учётом этих правок. Скопируйте его полностью и сохраните как .html:
```html
TORNEO CASINO
✦ TORNEO CASINO
👤 Гость
💰 0
Ставка:
🦅
🪙
Нажмите "Орёл" или "Решка"
1.00×
Ожидание ставки...
Сделайте ставку
💎
Доход за клик: 1 💰
Автокликер: выкл.
🏅 Достижения
📊 Статистика
🎫 Лотерейные билеты
❓
❓
❓
Выберите билет и начните игру
👋 Добро пожаловать!
Введите ваш никнейм, чтобы начать игру
🔑 Секретный код
Введите код для получения бонуса
ПОБЕДА!
+250
```
---
✅ Что исправлено
· Вкладки больше не накладываются – они переносятся на несколько строк, шрифт уменьшен на мобильных, кнопки получают min-width и white-space: nowrap.
· Лотерея работает стабильно (полный сброс после каждой игры).
· Секретный код – кнопка 🔑, ввод laverna даёт +10000 (один раз).
Теперь интерфейс отображается корректно даже на самых узких экранах. Удачи в игре! 🍀