/* Лобби: витрина игр и топ недели.
   Порядок карточек приходит от бота под гео игрока — топы оператора по
   странам расходятся сильно, одинаковая витрина для всех теряет клики. */

.lobby { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

.lobby-greet { font-size: 13.5px; line-height: 1.45; color: var(--muted); text-align: center;
  background: rgba(139,92,255,.10); border: 1px solid rgba(139,92,255,.26); border-radius: 12px; padding: 9px 12px; }

.lobby-tabs { display: flex; gap: 6px; flex: none; }
.lobby-tabs button { flex: 1; border: 1px solid var(--stroke); background: var(--panel); color: var(--muted);
  font-weight: 800; font-size: 13px; padding: 9px 8px; border-radius: 11px; cursor: pointer; }
.lobby-tabs button.on { background: rgba(139,92,255,.18); border-color: var(--violet); color: var(--violet-soft); }

.glist, .toplist { flex: 1 1 0; min-height: 0; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.glist::-webkit-scrollbar, .toplist::-webkit-scrollbar { display: none; }

/* Витрина как в лобби казино: хиро сверху, остальные плитки 2×2.
   Список строк с чипом «Играть» читался как меню, не как зал. */
.glist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }

.gcard { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px; padding: 0;
  color: var(--text); font-family: inherit; overflow: hidden;
  transition: transform .07s, border-color .2s, box-shadow .2s; }
.gcard:active { transform: scale(.985); }
.gcard:not(.soon) { animation: gcardGlow 2.8s ease-in-out infinite; }
@keyframes gcardGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,255,0); }
  50% { box-shadow: 0 8px 22px rgba(139,92,255,.18); }
}
.gcard-art { position: relative; flex: none; width: 100%; height: 110px; border-radius: 0; overflow: hidden;
  display: grid; place-items: center; font-size: 28px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.gcard-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcard-go { display: none; }
.gcard.hero { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.gcard.hero .gcard-art { width: 128px; height: 92px; flex: 0 0 128px; border-bottom: 0; border-right: 1px solid rgba(255,255,255,.08); }
.gcard.hero .gcard-body { flex: 1; padding: 12px 8px 12px 14px; }
.gcard.hero .gcard-go { display: inline-flex; margin-right: 12px; }
body.h-short .gcard-art { height: 108px; }
body.h-short .gcard.hero .gcard-art { height: 90px; width: 140px; flex-basis: 140px; }
body.h-tiny .gcard-art { height: 72px; }
body.h-tiny .gcard.hero .gcard-art { height: 68px; width: 100px; flex-basis: 100px; }
/* На 390×844 место есть: без подписи плитки читаются как иконки, не зал. */
body.h-tiny .gcard-sub { display: none; }
.gcard-art:has(.art-poster-img) .gcard-pulse { opacity: .18; }
.gcard-pulse { position: absolute; inset: -20%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 62%);
  animation: gpulse 1.8s ease-in-out infinite; }
@keyframes gpulse { 0%, 100% { transform: scale(.85); opacity: .35; } 50% { transform: scale(1.15); opacity: .7; } }
.gcard-live { position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #35d07f; box-shadow: 0 0 8px #35d07f; z-index: 2; animation: liveblink 1.2s ease-in-out infinite; }
@keyframes liveblink { 50% { opacity: .35; } }
.gcard-glyph { position: relative; z-index: 1; }
.gcard-crash .gcard-art { background: radial-gradient(circle at 30% 80%, #5a1020, #12060c); }
.gcard-mines .gcard-art { background: radial-gradient(circle at 50% 80%, #1a8fa3, #071018); }
.gcard-aviamasters .gcard-art { background: linear-gradient(180deg, #050d1e 0 58%, #0a2244 58% 100%); }

.art-poster, .art-crash, .art-mines, .art-avia { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.art-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art-crash .art-plane {
  width: 78px; height: 46px; overflow: visible; transform: rotate(-16deg) translateY(-3px);
  filter: drop-shadow(0 0 8px rgba(240,22,63,.7));
  animation: artFly 1.6s ease-in-out infinite;
}
.art-crash b { position: absolute; bottom: 6px; font-size: 10px; color: #fff; letter-spacing: -.3px;
  text-shadow: 0 0 8px rgba(255,255,255,.4); }
@keyframes artFly { 50% { transform: rotate(-12deg) translate(3px, -7px); } }

.art-mines { width: 100%; height: 100%; display: block; }
.art-mines svg { width: 100%; height: 100%; display: block; }

.art-avia { background: #071428; }
.art-avia-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.art-crash-sky { position: absolute; inset: 0; background:
  radial-gradient(circle at 30% 90%, rgba(240,22,63,.35), transparent 55%),
  linear-gradient(180deg, #2a0810, #0c0608); }
.art-avia-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-avia-fly { animation: artAvia 1.8s ease-in-out infinite; }
@keyframes artAvia { 50% { transform: translate(3px, -4px); } }
.gcard-plinko .gcard-art { background: radial-gradient(circle at 50% 20%, #4a2a80, #120828); }
.gcard-fishing .gcard-art { background: linear-gradient(180deg, #0a4860 0 28%, #083850 28% 100%); }
.art-plinko, .art-fish { position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
.art-plinko svg, .art-fish svg { width: 100%; height: 100%; display: block; }
.art-pk-ball { animation: artPkBall 1.4s ease-in-out infinite; }
@keyframes artPkBall { 50% { transform: translateY(3px); } }
.art-fish-swim { animation: artFishSwim 1.8s ease-in-out infinite; }
@keyframes artFishSwim { 50% { transform: translate(4px, -3px); } }
.gcard-title { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-sub { font-size: 11px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard.hero .gcard-title { font-size: 17px; }
.gcard.hero .gcard-go { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--violet-soft);
  background: rgba(139,92,255,.16); border-radius: 9px; padding: 7px 10px; white-space: nowrap; }
@media (min-width: 760px) {
  body:not(.h-short) .gcard-art { height: 148px; }
  body:not(.h-short) .gcard.hero .gcard-art { height: 128px; width: 196px; flex-basis: 196px; }
}

/* Игра в разработке: карточка видна, но тусклая. Показываем её сознательно —
   витрина из одной игры выглядит пустой, а анонс даёт повод вернуться. */
.gcard.soon { opacity: .5; cursor: default; }
.gcard.soon .gcard-go { color: var(--muted); background: rgba(255,255,255,.07); }

/* ===== Топ недели ===== */
.lb-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px; font-size: 13px; border-bottom: 1px solid rgba(55,46,107,.4); }
.lb-row:last-child { border-bottom: none; }
.lb-row .pos { width: 26px; text-align: center; font-weight: 900; color: var(--muted); flex: 0 0 auto; }
.lb-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-row .win { font-weight: 900; color: var(--gold); }
.lb-row.me { background: rgba(139,92,255,.12); border-radius: 8px; }
.lb-row.me .nm { color: var(--violet-soft); }
.lb-tiers { font-size: 11px; color: var(--muted); text-align: center; padding: 9px 6px 3px; line-height: 1.5; }
.lb-tiers b { color: var(--gold-soft); }
.lb-empty { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px 8px; line-height: 1.5; }