*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;   /* критично для «узких» Android WebView */
}

body {
  margin: 0;
  background: #141414;
  color: #fff;
  font-family: 'Onest', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  -ms-overflow-style: none;     /* IE и Edge */
  scrollbar-width: none;        /* Firefox */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Opera */
}
.container {
  flex: 1;
  padding: 3vw;
  padding-bottom: 110px; /* чтобы контент не заезжал под footer */
}
.container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.empty-state{
  display:flex;
  justify-content:center;
  align-items:center;
  height:52px;            /* чтобы строка по высоте как у записей */
  color:rgba(255,255,255,.6);
}
.top-bar {
  position: absolute;         /* оставляем твою раскладку */
  left: 0;
  right: 0;                   /* добавляем правую границу */
  width: 100%;                /* было 94% — из-за этого и «резало» */
  box-sizing: border-box;     /* чтобы padding не расширял за 100% */
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}

/* чтобы элементы в шапке могли сжиматься и не выталкивали контейнер */
.top-bar > * { min-width: 0; }

/* общий случай — слот баланса/переключателя, встречается на всех страницах */
#balance-slot { 
  min-width: 0; 
  overflow: hidden;           /* перестраховка от длинных сумм */
}
#balance-slot * { white-space: nowrap; }


/* верхний ряд метрик: у всех по 20px высоты (иконки 20x20) */
.balance-top{ min-height:20px; }

/* ранг — чтобы центр совпадал с соседними ячейками */
#rank-value, .rank-value{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:20px;        /* синхронизируем с иконками 20x20 */
  line-height:20px;
  white-space:nowrap;
  font-size:16px;
  vertical-align:middle;
}

#rank-value .rank-text,
.rank-value .rank-text{ line-height:1; }

/* эмодзи/значки без сдвига */
#rank-value .rank-pre,
#rank-value .rank-post,
.rank-value .rank-pre,
.rank-value .rank-post{
  line-height:1;
  display:inline-block;
  transform:none;     /* раньше было translateY(-0.08em) */
  font-size:0.95em;
}
.lang-switch-card {
  display: flex;
  background: #333;
  border-radius: 999px;
  overflow: hidden;
  margin-right: 12rem;
}
.lang-switch-card { display: none !important; }

.lang-switch-card button {
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
}

.lang-switch-card .lang-active {
  background: #ffcc00;
  color: #000;
  border-radius: 30px;
  margin: 5px;
}

.balance-card {
  display: flex;
  align-items: center;
  background: #333;
  border-radius: 999px;
  padding: 6px 10px;
  gap: 6px;
}

.balance-card img {
  width: 5vw;
  height: 5vw;
}

.balance-card span {
  font-size: 0.8rem;
}
.container::-webkit-scrollbar {
  display: none;
}
/* Обертка по центру страницы */
.profile-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

/* Контейнер с аватаром */
.profile-container {
  display: inline-block;
}

/* Аватар по центру */
.avatar-img {
  display: block;
  width: 26vw;
  height: auto;
  margin-top: 4.2rem;
}

/* Боковые карточки */
.profile-side {
  position: absolute;
  top: 6%;
  left: 140%; /* справа от картинки */
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Блок с балансом */
.balance-card {
  display: flex;
  align-items: center;
  background: #333;
  border-radius: 999px;
  padding: 6px 10px;
  gap: 6px;
}

/* Иконка в балансе */
.balance-card img {
  width: 5vw;
  height: 5vw;
}

/* Текст баланса */
.balance-card span {
  font-size: 0.8rem;
}

/* Кнопка + */
.balance-card button {
  background: #fff;
  border: none;
  border-radius: 50%;
  color: #2B2B2B;
  font-weight: bold;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Секция с балансами */
.balance-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  margin-bottom: 22px;
}

.balance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 1px;
  border-right: 1px solid #555;
}

.balance-item:last-child {
  border-right: none;
}

.balance-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.balance-top img {
  width: 20px;
  height: 20px;
}

.balance-value {
  font-size: 16px;
}

.balance-label {
  margin-top: 4px;
  color: #EBB312;
  font-size: 13px;
}

/* Остальные элементы */
.lang-switch {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 12px 0;
}

.lang-switch button {
  background: #333;
  border: none;
  border-radius: 12px;
  padding: 6px 12px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.games-placeholder {
  background: #2B2B2B;
  border-radius: 33px;
  height: 150px;
  margin: 12px 0;
}

.games-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0;
}

.games-title {
  text-align: center;
  font-size: 1.3rem;
  margin: 1.2rem 0;
  color: white;
  font-weight: 600;
}

.game-cards {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.game-card {
  width: 123px;
  height: 123px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  display: block; 
}
/* Блок табов с общим фоном */
.tabs{
  display:flex;
  background:#17181a;
  border: 1px solid #212226;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:12px;
  padding:5px;           /* зазор делаем паддингом контейнера */
  gap:5px;               /* и/или gap, если хочешь щель между табами */
}

.tab{
  flex:1;
  text-align:center;
  padding:10px 0;
  font-size:14px;
  cursor:pointer;
  color:#fff;
  font-weight:600;
  transition:background .2s;
  margin:0;              
  border-radius:999px;   /* полная скруглённость у самих табов */
  user-select:none;      /* чтобы не подсвечивался текст при клике */
}

.tab.active{
  background:#1e1f22;
  border: 1px solid #212226;
}

/* Таблица */
.table-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Одна строка таблицы */
.table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 20px;
  background: #17181a;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

/* Чередующиеся строки */
.table-row:nth-child(even) {
  background: #1e1f22;
}

/* Заголовок таблицы */
.table-header {
  font-weight: 600;
  color: #aaa;
  background: none;
  font-size: 1rem;
}

/* Цвет положительных и отрицательных выплат */
.positive {
  color: #4caf50;
  font-weight: 600;
}

.negative {
  color: #f44336;
  font-weight: 600;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #17181a;
  padding-bottom: 25px;
  padding-top: 15px;
  border-top: 1px solid #212226;
  z-index: 100;
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #777777;
}

.footer-item img {
  width: 7vw;
  height: 7vw;
  margin-bottom: 0.5rem;
}

.footer-item.active {
  color: #EBB312;
}

.footer-item.active img {
  filter: brightness(0) saturate(100%) invert(74%) sepia(91%) saturate(474%) hue-rotate(1deg) brightness(98%) contrast(89%);
}
.games-video {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 12px 0;
  background: #000; /* на случай загрузки */
}

.games-video-slider {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  gap: 12px;              
  overflow: hidden;
}
.games-video-slider .slide {
  display: block;
  position: relative;
  border-radius: 16px;     
  overflow: hidden;
}
.games-video-slider .slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       
}

.video-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.video-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.games-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 8px 0;
}

.dot {
  width: 8px;
  height: 8px;
  background: rgba(235, 179, 18, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}

.dot.active {
  background: #EBB312;
}

.toggle-switch {
  width: 62px;
  height: 34px;
  background-color: #1e1f22;
  border-radius: 34px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-circle {
  width: 22px;
  height: 22px;
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: white;
  border-radius: 50%;
  transition: left 0.3s, background-color 0.3s;
}

.toggle-switch.active .toggle-circle {
  left: 34px;
  background-color: #EBB312;
}

.lang-toggle {
  position: relative;
  width: 90px;
  height: 34px;
  background-color: #1e1f22;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  cursor: pointer;
}

.lang-option {
  flex: 1;
  z-index: 1;                /* текст всегда над бегунком */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;               /* неактивная — белая */
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.lang-option.active {
  color: #000;
}

.lang-slider {
  position: absolute;
  top: 2px;
  left: 0;                   /* обязательно 0 */
  width: 42px;               /* реальная ширина подгоняется скриптом */
  height: 30px;
  background-color: #ffcc00;
  border-radius: 999px;
  z-index: 0;                /* ниже текста */
  transition: transform 0.25s ease, width 0.25s ease;
  will-change: transform, width;
}

@media screen and (min-width: 600px) {
  body {
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: start;
    overflow: hidden;
  }

  .iphone-wrapper {
    width: 800px; 
    height: 1730px; 
    transform: scale(0.5); 
    transform-origin: top center;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    border-radius: 30px;
  }
}

.comeback{
  text-decoration: none;
  color: #EBB312;
}
.finance-table-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px;
}

.finance-table-row {
  display: grid;
  grid-template-columns: 90px 90px 1fr 1fr; /* Дата | Сумма | Тип | Статус */
  align-items: center;
  padding: 8px 12px;
  border-radius: 28px;
  background: #2b2b2b;
}

.finance-table-row:nth-child(even):not(.finance-table-header) {
  background: #2B2B2B;
}

.finance-table-header {
  background: transparent;
  font-weight: 600;
  padding: 8px 12px;
}

.finance-table-row > div {
  text-align: left; /* или right для суммы */
}

.finance-table-row > div:nth-child(2) {
  text-align: right; /* сумма вправо */
}

.finance-table-row > div:nth-child(4) {
  text-align: center; /* статус по центру */
}

/* ==== УБИРАЕМ МОБИЛЬНУЮ ПОДСВЕТКУ ТАПА (Android/iOS/Yandex) ==== */
*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
html, body, a, a:active, button, .footer, .footer * {
  -webkit-focus-ring-color: rgba(0,0,0,0) !important;
  outline: none !important;
}
.footer .footer-item:active,
.footer .footer-item *:active,
a:active {
  background: transparent !important;
}
img, svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ==== ПЛАВНЫЙ СКЕЙЛ ИКОНОК ФУТЕРА ==== */
:root{
  --tap-scale:       1.08;  /* увеличение при удержании */
  --tap-bump-scale:  1.16;  /* «бамп» по клику */
  --tap-ease:        cubic-bezier(.2,.7,.2,1);
  --tap-dur:         .26s;  /* плавнее/дольше */
  --tap-bump-dur:    .34s;  /* плавнее/дольше */
}

/* Масштабируем именно <img>/<svg>, чтобы не конфликтовать с transform контейнера */
.footer .footer-item img,
.footer .footer-item svg {
  display:inline-block;
  transform-origin:center center;
  transition: transform var(--tap-dur) var(--tap-ease);
}

.footer .footer-item.tap-active img,
.footer .footer-item.tap-active svg {
  transform: scale(var(--tap-scale));
}

/* «бамп» по клику */
@keyframes footer-tap-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(var(--tap-bump-scale)); }
  100% { transform: scale(1); }
}
.footer .footer-item.tap-bump img,
.footer .footer-item.tap-bump svg {
  animation: footer-tap-bump var(--tap-bump-dur) var(--tap-ease);
}

/* ВАЖНО: на активной вкладке не показываем увеличение вообще */
.footer .footer-item.active img,
.footer .footer-item.active svg {
  transition: none;           /* никаких плавных переходов */
  transform: none !important; /* остаётся как есть */
}

/* ===== Нормализация размера текста для Android WebView ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ===== Глобальная страховка ширины/высоты ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip; /* безопаснее, чем hidden */
}

body { min-height: 100dvh; }
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
}

/* детям flex/grid позволяем СЖИМАТЬСЯ, чтобы не выталкивали контейнер */
.top-bar > *, .tabs > *, .row > *, .flex > * { min-width: 0; }

/* изображения не расширяют контейнер */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

/* ===== Главная: «Игры» — ровно 3 в ряд, без переполнений ===== */
.game-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
  /*padding-inline: clamp(8px, 3vw, 16px);*/
}
.game-card {
  width: auto !important;
  height: auto !important;
  aspect-ratio: 20 / 20;          /* стабильная «прямоугольная» форма */
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: block;
}

/* ===== Универсальный анти-«vw-раздуватель» отступов ===== */
.container,
.section,
.card,
.block,
.wrapper {
  padding-inline: clamp(8px, 3vw, 20px);
}

/* ===== Нижние панели/кнопки — учитываем безопасную зону ===== */
.footer-bar,
.bottom-panel,
.bet-panel,
.bottom-controls {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  padding-inline: clamp(10px, 3vw, 16px);
}

/* Пилюля баланса — не распираем на узких */
#balance-slot .bal-switch { max-width: 100%; min-width: 0; }
#balance-slot .curr-amount {
  max-width: min(36vw, 150px);
  overflow: hidden; text-overflow: ellipsis;
}


/* === Global compact for very-narrow screens (<=380px) === */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 380px){
  /* универсальная плавная типографика */
  :root{
    --fs-title:  clamp(14px, 4.8vw, 18px);
    --fs-body:   clamp(12px, 3.8vw, 15px);
    --fs-button: clamp(13px, 4.2vw, 16px);
  }

  /* кнопки поумерить отступы, чтобы не рвали строки */
  button, .btn, .ui-button{
    font-size: var(--fs-button);
    /* padding: 10px 14px;*/
    line-height: 1.1;
  }

  /* заголовки/лейблы помельче */
  h1, h2, .title, .header-title{ font-size: var(--fs-title); line-height: 1.15; }
  .label, .subtitle, .chip, .field-title, .table-title{ font-size: var(--fs-body); }

  /* верхняя панель: не даём элементам расталкивать шапку */
  #balance-slot{ max-width: 68vw; min-width: 48px; }

  /* иконки в шапке/футере немного компактнее */
  .footer .footer-item img,
  .top-bar img{ width: 18px; height: 18px; }
}

/* Android WebView панель: безопасные viewport-юниты если доступны */
@supports (width: 100svw){
  .page, .wrapper { width: 100svw; }
}