:root {
  --app-bg: #070e18;
  --app-bg-2: #0b1522;
  --app-surface: #121c2e;
  --app-surface-2: #172338;
  --app-line: rgba(255, 255, 255, 0.08);
  --app-gold: #f0c419;
  --app-gold-2: #ffd24d;
  --app-gold-dark: #c9a00a;
  --app-text: #ffffff;
  --app-muted: #8b93a7;
  --app-green: #22c55e;
  --app-green-2: #16a34a;
  --app-red: #ef4444;
  --app-red-2: #dc2626;
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-radius-sm: 10px;
  --app-radius: 14px;
  --app-radius-lg: 18px;
  --app-radius-pill: 999px;
  --app-nav-h: 74px;
  --app-top-h: 56px;
  --app-max: 430px;
  --app-ease: 0.2s ease;
  --app-font: "Inter", "Poppins", system-ui, -apple-system, sans-serif;
}

.app-only { display: none !important; }

/* ---------- Shared components (always available) ---------- */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--app-radius-sm);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--app-ease), filter var(--app-ease), background var(--app-ease);
}
.app-btn:focus-visible {
  outline: 2px solid var(--app-gold);
  outline-offset: 2px;
}
.app-btn:active { transform: scale(0.98); }
.app-btn:disabled,
.app-btn.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.app-btn--primary {
  background: var(--app-gold);
  color: #1a1400;
}
.app-btn--primary:hover { filter: brightness(1.08); color: #1a1400; }
.app-btn--green {
  background: linear-gradient(180deg, #34d399 0%, #16a34a 100%);
  color: #fff;
}
.app-btn--green:hover { color: #fff; filter: brightness(1.06); }
.app-btn--red {
  background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  color: #fff;
}
.app-btn--red:hover { color: #fff; filter: brightness(1.06); }
.app-btn--ghost {
  background: transparent;
  color: var(--app-text);
  border: 1px solid var(--app-line);
}

.app-search {
  position: relative;
}
.app-search input {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--app-radius-pill);
  background: #0e1828;
  color: var(--app-text);
  padding: 0 16px 0 42px;
  font-size: 13px;
}
.app-search input::placeholder { color: #6b7386; }
.app-search input:focus {
  outline: 2px solid rgba(240, 196, 25, 0.45);
}
.app-search i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7386;
  font-size: 16px;
  pointer-events: none;
}

.app-section-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text);
}

.app-featured {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--app-radius-lg);
  min-height: 132px;
  background: #101828;
  text-decoration: none;
  color: #fff;
}
.app-featured img {
  width: 100%;
  height: 132px;
  object-fit: cover;
  display: block;
}
.app-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 14, 24, 0.15) 20%, rgba(7, 14, 24, 0.55) 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 18px;
  text-align: right;
}
.app-featured__name {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.app-featured .app-btn {
  min-height: 34px;
  padding: 8px 14px;
  font-size: 12px;
}

.app-trend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.app-trend__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--app-text);
}
.app-trend__thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #101828;
  border: 1px solid var(--app-line);
}
.app-trend__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-trend__name {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #c9cfdb;
}

.app-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Vestibulo identico a la imagen: TRENDING (4) + FEATURED (banner) + ALL (cuadricula).
   Sin repeticion: app_games reparte los 19 por alias, aqui solo se evita
   que un bloque legacy duplicado aparezca dos veces seguidas. */
.app-game-grid + .app-game-grid,
.games-section-wrapper + .app-game-grid,
.app-only .app-game-grid ~ .app-game-grid,
.app-only .app-game-grid ~ .games-section-wrapper { display: none !important; }
/* Todas las tarjetas del vestibulo miden lo mismo: la primera NO ocupa 2 columnas. */
.app-game-grid .app-game-card,
.app-game-grid .app-game-card:first-child,
.app-game-grid .app-game-card:nth-child(odd),
.app-game-grid .app-game-card:nth-child(even) {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 0.92 !important;
}
.app-game-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #101828;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 1 / 0.92;
  min-width: 0;
}
.app-game-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.app-game-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 8px 10px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 70%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-balance {
  background: linear-gradient(180deg, #fffdf4 0%, #fff 100%);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #111827;
}
.app-balance__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f8e08a;
  display: grid;
  place-items: center;
  color: #b45309;
  font-size: 22px;
  flex-shrink: 0;
}
.app-balance__label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}
.app-balance__value {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 800;
  color: #111827;
  line-height: 1.1;
}

.app-wallet-hero {
  text-align: center;
  padding: 8px 0 4px;
}
.app-wallet-hero__label {
  margin: 0;
  font-size: 12px;
  color: var(--app-muted);
}
.app-wallet-hero__value {
  margin: 4px 0 16px;
  font-size: 34px;
  font-weight: 800;
  color: var(--app-gold);
  letter-spacing: -0.03em;
}
.app-wallet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.app-wallet-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.app-stat {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-stat i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(240, 196, 25, 0.12);
  color: var(--app-gold);
  font-size: 18px;
}
.app-stat p {
  margin: 0;
  font-size: 11px;
  color: var(--app-muted);
}
.app-stat strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: #fff;
}

/* ---------- Billeteras seleccionables (monedas / efectivo) ---------- */
.app-wallet-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 14px;
  padding: 8px clamp(10px, 1vw, 14px);
  border: 1px dashed var(--app-line);
  border-radius: var(--app-radius-pill);
  background: var(--app-surface);
  color: var(--app-muted);
  font-size: clamp(11px, 0.4vw + 10px, 13px);
  text-align: center;
}
.app-wallet-status i { color: var(--app-red); font-size: 16px; flex-shrink: 0; }
.app-wallet-status.is-on {
  border-style: solid;
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}
.app-wallet-status.is-on i { color: var(--app-green); }

button.app-wallet-card {
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--app-ease), box-shadow var(--app-ease), transform var(--app-ease),
    opacity var(--app-ease);
}
.app-wallet-card:focus-visible {
  outline: 2px solid var(--app-gold);
  outline-offset: 2px;
}
.app-wallet-card:active { transform: scale(0.99); }
.app-wallet-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.app-wallet-card__label {
  margin: 0;
  font-size: clamp(10px, 0.3vw + 9px, 12px);
  line-height: 1.3;
  color: var(--app-muted);
}
.app-wallet-card .app-wallet-card__value {
  display: block;
  margin-top: 3px;
  font-size: clamp(13px, 0.5vw + 11px, 16px);
  overflow-wrap: anywhere;
}
.app-wallet-card__state {
  display: block;
  margin-top: 6px;
  font-size: clamp(9px, 0.3vw + 8px, 11px);
  line-height: 1.3;
  color: var(--app-muted);
}

/* Estados de cada billetera */
.app-wallet-card.is-empty { opacity: 0.72; }
.app-wallet-card.is-authorized { border-color: rgba(240, 196, 25, 0.55); }
.app-wallet-card.is-authorized .app-wallet-card__state { color: var(--app-gold); }
.app-wallet-card.is-active {
  border-color: var(--app-green);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.16), rgba(22, 163, 74, 0.05)), var(--app-surface);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35), 0 10px 24px rgba(34, 197, 94, 0.16);
}
.app-wallet-card.is-active .app-wallet-card__state {
  color: #4ade80;
  font-weight: 700;
}
.app-wallet-card.is-active > i {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

/* Modal de confirmacion de identidad */
.app-wallet-modal__hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--app-muted);
}
.app-wallet-modal__hint strong { color: var(--app-gold); }
.app-wallet-modal__error {
  margin: 10px 0 0;
  font-size: 13px;
  color: #f87171;
}

/* Pantallas muy estrechas: las dos billeteras se apilan sin deformar nada */
@media (max-width: 340px) {
  .app-wallet-stats { grid-template-columns: 1fr; }
  .app-wallet-actions { grid-template-columns: 1fr; }
}

.app-trx {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.app-trx__item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--app-surface);
  border-radius: 12px;
  padding: 12px;
}
.app-trx__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 16px;
}
.app-trx__icon.is-out {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}
.app-trx__icon.is-in {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.app-trx__body { flex: 1; min-width: 0; }
.app-trx__id {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-trx__meta {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--app-muted);
}
.app-trx__amount {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.app-trx__amount.is-out { color: #f87171; }
.app-trx__amount.is-in { color: #4ade80; }

.app-balance__body {
  display: block;
  flex: 1;
  min-width: 0;
}
.app-balance__label,
.app-balance__value {
  display: block;
}
.app-balance__value {
  overflow-wrap: anywhere;
}
.app-balance--link {
  text-decoration: none;
  color: #111827;
  transition: transform var(--app-ease), filter var(--app-ease);
}
.app-balance--link:hover { color: #111827; filter: brightness(1.02); }
.app-balance--link:active { transform: scale(0.99); }
.app-balance--link .app-balance__value { font-size: 24px; }
.app-balance__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 9px 13px;
  border-radius: var(--app-radius-pill);
  background: #111827;
  color: var(--app-gold-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.app-balance__cta i { font-size: 15px; }

.app-quick-amounts {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.app-chip {
  flex: 1 1 calc(25% - 8px);
  min-width: 66px;
  min-height: 40px;
  padding: 8px 6px;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius-sm);
  background: #0e1828;
  color: var(--app-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--app-ease), background var(--app-ease), color var(--app-ease);
}
.app-chip:hover,
.app-chip:focus-visible {
  border-color: var(--app-gold);
  color: var(--app-gold);
  outline: none;
}
.app-chip.is-active {
  background: var(--app-gold);
  border-color: var(--app-gold);
  color: #1a1400;
}

.app-profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  background: var(--app-surface);
}
.app-profile-head__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  color: #1a1400;
  font-size: 26px;
}
.app-profile-head__body {
  display: block;
  min-width: 0;
}
.app-profile-head__name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: anywhere;
}
.app-profile-head__meta {
  display: block;
  font-size: 12px;
  color: var(--app-muted);
  overflow-wrap: anywhere;
}

.app-menu {
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--app-line);
  border-radius: 16px;
  background: var(--app-surface);
}
.app-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--app-line);
  color: var(--app-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.app-menu__item:last-child { border-bottom: 0; }
.app-menu__item:active { background: rgba(255, 255, 255, 0.04); }
.app-menu__item > i:first-child {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: var(--app-gold);
  font-size: 19px;
}
.app-menu__item span { flex: 1; }
.app-menu__arrow {
  color: var(--app-muted);
  font-size: 16px;
}
.app-menu__item--danger span,
.app-menu__item--danger > i:first-child { color: var(--app-red); }

.app-welcome {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 16px;
  padding: 16px;
}
.app-welcome__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}
.app-welcome__desc {
  margin: 6px 0 14px;
  font-size: 12px;
  color: var(--app-muted);
}
.app-welcome__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.app-welcome__actions .app-btn--ghost { border-color: rgba(255, 255, 255, 0.22); }

.app-hero { margin-bottom: 16px; }
.app-hero__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-hero__track::-webkit-scrollbar { display: none; }
.app-hero__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 176px;
  border-radius: var(--app-radius-lg);
  background: #101828;
}
.app-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.app-hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(7, 14, 24, 0) 0%, rgba(7, 14, 24, 0.88) 78%);
  text-align: center;
}
.app-hero__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.app-hero__desc {
  margin: 4px 0 12px;
  font-size: 12px;
  color: #d5dae4;
}
.app-hero__body .app-btn {
  min-height: 38px;
  padding: 9px 18px;
  font-size: 12px;
}
.app-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.app-hero__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: width var(--app-ease), background var(--app-ease);
}
.app-hero__dot.is-active {
  width: 20px;
  border-radius: var(--app-radius-pill);
  background: var(--app-gold);
}

.app-topbar {
  display: none;
}
.app-bottom-nav {
  display: none;
}

.app-form .form-label,
.app-form .form--label {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 600;
}
.app-form .form--control,
.app-form .form-control {
  background: #0e1828;
  border: 1px solid var(--app-line);
  color: #fff;
  border-radius: 12px;
  min-height: 46px;
}

/* Toast/modal polish */
.win-loss-popup__inner {
  border-radius: 16px;
}

/* =========================================================
   MOBILE / TABLET APP SHELL  (<= 1023px)
   ========================================================= */
@media (max-width: 1023px) {
  .app-only { display: block !important; }
  .desktop-only { display: none !important; }

  html, body.app-root {
    background: var(--app-bg) !important;
  }

  body.app-root {
    font-family: var(--app-font);
    color: var(--app-text);
    padding-bottom: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .preloader { background: var(--app-bg); }

  .header,
  .footer-area,
  .breadcrumb,
  .mobile-bottom-nav {
    display: none !important;
  }

  .py-100 {
    padding: 0 !important;
  }

  .app-root .container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .app-shell {
    max-width: var(--app-max);
    margin: 0 auto;
    min-height: 100dvh;
    background: var(--app-bg);
    padding: 0 0 24px;
  }

  .app-topbar {
    display: block;
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 0 16px;
    background: var(--app-gold);
    min-height: var(--app-top-h);
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px;
  }
  .app-topbar__inner {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .app-topbar__title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1a1400;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .app-topbar__title i { font-size: 22px; }
  .app-userchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #111827;
    border-radius: var(--app-radius-pill);
    padding: 6px 14px 6px 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .app-userchip i {
    font-size: 22px;
    color: #f59e0b;
  }
  a.app-userchip { text-decoration: none; }
  a.app-userchip:hover { color: #111827; }

  .app-topbar--lobby .app-topbar__inner {
    justify-content: space-between;
    gap: 10px;
  }

  .app-topbar__balance {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 52%;
    padding: 7px 12px;
    border-radius: var(--app-radius-pill);
    background: rgba(17, 24, 39, 0.14);
    color: #1a1400;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-topbar__balance i {
    font-size: 17px;
    flex-shrink: 0;
  }
  .app-topbar__balance span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .app-brand img {
    max-height: 34px;
    width: auto;
  }

  .app-topbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .app-topbar__link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--app-radius-pill);
    color: #1a1400;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .app-topbar__link--solid {
    background: #111827;
    color: var(--app-gold-2);
  }
  .app-topbar__link--solid:hover { color: var(--app-gold-2); }

  .app-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: calc(var(--app-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #0a121e;
    border-top: 1px solid var(--app-line);
    justify-content: space-around;
    align-items: flex-start;
  }
  .app-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #6b7386;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 6px;
    transition: color var(--app-ease);
  }
  .app-bottom-nav a i {
    font-size: 22px;
  }
  .app-bottom-nav a.active,
  .app-bottom-nav a:hover,
  .app-bottom-nav a:focus-visible {
    color: var(--app-gold);
  }

  .info-wrapper { display: none !important; }

  .games-section,
  .games-section-inner,
  .games-section-wrapper,
  .games-section-content {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    gap: 0 !important;
  }

  .games-section-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .game-item {
    width: 100% !important;
  }
  .game-item__image {
    border-radius: 16px;
    overflow: hidden;
  }
  .game-item__image img {
    height: 148px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-radius: 16px;
    object-fit: cover;
  }
  .game-item__image::after { display: none !important; }
  .game-item__play {
    opacity: 0;
    visibility: hidden;
  }
  .game-item:hover .game-item__play,
  .game-item:focus-within .game-item__play {
    opacity: 1;
    visibility: visible;
  }
  .game-item__title {
    margin-top: 8px !important;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 800;
  }

  .custom--card {
    background: var(--app-surface);
    border: 1px solid var(--app-line);
    border-radius: 16px;
  }

  .games-section.pt-100,
  .games-section.pb-50 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .cookies-card {
    bottom: calc(var(--app-nav-h) + 8px) !important;
  }

  .show-filter { display: none !important; }
  .responsive-filter-card { display: none !important; }
  .transection-table-scroller table.transection-table thead { display: none; }

  /* ---------- Wallet / deposit / withdraw polish ---------- */
  .app-shell .custom--card {
    border-radius: 16px;
    box-shadow: none;
  }
  .app-shell .payment-system-list {
    --thumb-width: 78px;
    --thumb-height: 34px;
  }
  .app-shell .payment-system-list.is-scrollable {
    max-height: min(320px, 56vh);
  }
  .app-shell .payment-item {
    padding: 12px 14px;
  }
  .app-shell .payment-item__thumb {
    padding-left: 8px;
  }
  .app-shell .deposit-info__title,
  .app-shell .deposit-info__input {
    max-width: 100%;
  }
  .app-shell .deposit-info__input {
    text-align: left;
  }
  .app-shell .deposit-info__input-group .form--control {
    text-align: left !important;
  }
  .app-shell .deposit-info hr {
    width: 100%;
  }

  /* ---------- Auth screens (login / register / forgot password) ---------- */
  .app-root .account-inner {
    max-width: var(--app-max);
    border-radius: 18px;
  }
  .app-root .account-inner .btn {
    border-radius: 12px;
  }

  /* ---------- Dark stacked tables ---------- */
  .app-shell .table--responsive--xl tbody tr {
    background: var(--app-surface-2) !important;
    border: 1px solid var(--app-line);
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
  }
  .app-shell .table--responsive--xl tbody tr td {
    border-bottom: 1px solid var(--app-line);
    color: var(--app-text);
  }
  .app-shell .table--responsive--xl tbody tr td:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root { --app-max: 720px; }
  .app-shell { max-width: 720px; }
  .app-game-grid,
  .games-section-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root { --app-max: 900px; }
  .app-shell { max-width: 900px; }
  .app-game-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .games-section-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* =========================================================
   DESKTOP: keep original composition, center extras
   ========================================================= */
@media (min-width: 1024px) {
  .app-only,
  .app-topbar,
  .app-bottom-nav { display: none !important; }

  .app-root .app-shell {
    max-width: none;
    padding: 0;
    background: transparent;
  }

  body.app-root {
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   GAME PAGES  (single game screens: dark futuristic + gold)
   Applies to every /user/play/{game} screen on mobile & desktop
   ========================================================= */
body.app-game-page {
  --game-surface: #0d1727;
  --game-surface-2: #101d31;
  --game-line: rgba(255, 255, 255, 0.09);
  --game-gold: var(--app-gold);
  --game-glow: rgba(240, 196, 25, 0.22);
  background: var(--app-bg) !important;
  font-family: var(--app-font);
}

.app-game-page .app-shell {
  background: var(--app-bg);
}

/* Kill the legacy decorative shapes / oversized padding on game screens */
.app-game-page .py-100 { padding: 0 !important; }
.app-game-page .container .container {
  padding-left: 0;
  padding-right: 0;
}
.app-game-page .headtail-wrapper::after,
.app-game-page .headtail-wrapper::before {
  display: none !important;
}
.app-game-page .info-wrapper,
.app-game-page .win-loss-bonus { display: none !important; }

/* ---------- Gold game header ---------- */
.app-game-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--app-radius);
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.app-game-head__btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid rgba(26, 20, 0, 0.65);
  border-radius: 50%;
  background: transparent;
  color: #1a1400;
  font-size: 19px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--app-ease), color var(--app-ease), transform var(--app-ease);
}
.app-game-head__btn:hover,
.app-game-head__btn:focus-visible {
  background: #1a1400;
  color: var(--app-gold-2);
  outline: none;
}
.app-game-head__btn:active { transform: scale(0.94); }
.app-game-head__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #1a1400;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- "Available Balance" card ---------- */
.app-game-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius);
  background: var(--game-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.app-game-balance__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  color: #1a1400;
  font-size: 20px;
  box-shadow: 0 0 0 4px rgba(240, 196, 25, 0.1);
}
.app-game-balance__body {
  flex: 1;
  min-width: 0;
}
.app-game-balance__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--app-muted);
}
.app-game-balance__value {
  display: block;
  margin-top: 1px;
  color: var(--game-gold);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.app-game-balance__unit {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-pill);
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Panels ---------- */
.app-game-page .game--card,
.app-game-page .custom--card.game--card,
.app-game-page .pool--card,
.app-game-page .headtail-wrapper {
  max-width: 100%;
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid var(--game-line);
  border-top: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.app-game-page .headtail-wrapper { padding: 18px; }
.app-game-page .game--card > .row { --bs-gutter-x: 0; }

/* the balance heading is replaced by the shared .app-game-balance card */
.app-game-page .game-contet-title { display: none !important; }
.app-game-page .color-predict-top { display: none !important; }

/* small helper label above number plates / selectors */
.app-game-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--app-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.app-game-hint i { color: var(--app-gold); font-size: 14px; }

/* Board / play area */
.app-game-page .headtail-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 18px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
  overflow: hidden;
}
.app-game-page .headtail-body__shape {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
}
.app-game-page .headtail-body__shape svg {
  width: 100%;
  height: 100%;
}
.app-game-page .headtail-body__flip {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  height: auto;
  z-index: 2;
}

/* Generic dark inputs inside game panels */
.app-game-page .form--control,
.app-game-page .form-control {
  background: #0a1424;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  min-height: 50px;
  color: var(--app-text);
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
.app-game-page .form--control:focus,
.app-game-page .form-control:focus {
  background: #0a1424;
  border-color: rgba(240, 196, 25, 0.5);
  box-shadow: 0 0 0 3px rgba(240, 196, 25, 0.12);
  color: var(--app-text);
}
.app-game-page .form--control::placeholder,
.app-game-page .form-control::placeholder { color: #64708a; }

.app-game-page .form-label,
.app-game-page .form--label {
  margin-bottom: 6px;
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Bet input row: [ amount ] [ USD ] ---------- */
.app-game-page .input-group {
  border: 1px solid var(--game-line);
  border-radius: 12px !important;
  background: #0a1424;
  overflow: hidden;
}
.app-game-page .input-group .form--control,
.app-game-page .input-group .form-control {
  border: 0;
  border-radius: 0;
  background: transparent;
  min-height: 52px;
  padding-left: 14px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.app-game-page .input-group .form--control:focus,
.app-game-page .input-group .form-control:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.app-game-page .input-group .input-group-text {
  height: 52px;
  width: auto;
  min-width: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  color: #1a1400;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: grid;
  place-content: center;
}
.app-game-page .input-group .input-group-text::after { display: none !important; }
.app-game-page .input-group .minmax-btn {
  min-width: 46px;
  padding: 0 10px;
  background: var(--game-surface-2);
  color: var(--app-gold);
  font-size: 11px;
  border-left: 1px solid var(--game-line);
}
.app-game-page .input-group .minmax-btn:hover { background: #16253c; }

/* Limits / win info note under the bet input */
.app-game-page .input-inner-note {
  display: block;
  margin-top: 10px;
  color: var(--app-muted);
  font-size: 11.5px;
  line-height: 1.6;
}
.app-game-page .input-inner-note i {
  margin-right: 6px;
  color: var(--app-muted);
  font-size: 12px;
}
.app-game-page .input-inner-note .text--warning,
.app-game-page .input-inner-note .text--base { color: var(--app-gold); }
.app-game-page .win-bonus { color: var(--app-gold) !important; }

/* ---------- Action buttons ---------- */
.app-game-page .game-playbtn {
  max-width: 100%;
  margin: 18px 0 0;
  display: flex;
  gap: 10px;
}
.app-game-page .game-playbtn .btn { flex: 1 1 auto; }
.app-game-page .btn--gradient,
.app-game-page .btn.btn--gradient {
  position: relative;
  z-index: 1;
  min-height: 52px;
  padding: 12px 22px !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%) !important;
  color: #1a1400 !important;
  font-family: var(--app-font) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(240, 196, 25, 0.18);
  transition: transform var(--app-ease), filter var(--app-ease);
}
.app-game-page .btn--gradient::after,
.app-game-page .btn--gradient::before { display: none !important; }
.app-game-page .btn--gradient:hover { filter: brightness(1.06); color: #1a1400 !important; }
.app-game-page .btn--gradient:active { transform: scale(0.985); }
.app-game-page .btn--gradient:disabled,
.app-game-page .btn--gradient[disabled] { opacity: 0.55; }

/* success / cashout style actions stay green like the reference */
.app-game-page .cashoutBtn,
.app-game-page .btn--gradient-success {
  background: linear-gradient(180deg, #34d399 0%, #16a34a 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.25);
}
.app-game-page .cashoutBtn:hover { color: #fff !important; }

/* Instruction / sound row */
.app-game-page .sound--btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--game-line);
  border-radius: 50%;
  background: var(--game-surface-2);
  color: var(--app-gold);
  font-size: 16px;
}
.app-game-page .sound--btn:hover { border-color: var(--app-gold); }
.app-game-page [data-bs-target="#exampleModalCenter"] {
  color: var(--app-muted) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.app-game-page [data-bs-target="#exampleModalCenter"] i { color: var(--app-muted); }

/* ---------- MINES: 5 x 5 treasure grid ---------- */
.app-game-page .game--card > .mine-box-wrapper,
.app-game-page .mine-box-wrapper:has(> .mine-box) {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  height: auto;
  align-items: center;
}
.app-game-page .mine-box {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}
.app-game-page .mine-box-front,
.app-game-page .mine-box-hidden {
  background: transparent;
  border-radius: 12px;
  padding: 2px;
}
.app-game-page .mine-box-front img,
.app-game-page .mine-box-hidden img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.app-game-page .mine-box.gold-box .mine-box-front img { opacity: 0.72; }
.app-game-page .mine-box:hover .mine-box-front img { transform: translateY(-3px) scale(1.04); }
.app-game-page .gold-mine-box { gap: 4px; min-height: 0; }
.app-game-page .gold-mine-box .mine-image img { width: 26px; }
.app-game-page .mines-number {
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
}

/* ---------- POKER: winning hands + table ---------- */
.app-game-page .card-item-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
}
.app-game-page .card-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.app-game-page .card-item::before,
.app-game-page .card-item::after { display: none !important; }
.app-game-page .card-item__thumb {
  flex-shrink: 0;
  max-width: 62px;
  overflow: hidden;
}
.app-game-page .card-item__thumb img {
  width: 100%;
  max-width: 62px;
  max-height: 24px;
  object-fit: contain;
  display: block;
}
.app-game-page .card-item .card-item__text {
  color: var(--app-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.app-game-page .card-item__icon {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 600;
}
.app-game-page .poker-table {
  padding: 22px 14px !important;
  border: 1px solid var(--game-line) !important;
  border-radius: 20px !important;
  background: var(--game-surface-2);
}
.app-game-page .poker-table::after { display: none !important; }
.app-game-page .poker-table__wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.app-game-page .poker-table__thumb {
  flex: 1 1 0;
  max-width: 74px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.app-game-page .poker-table__thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.app-game-page .poker-card__bottom {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  margin-top: 16px;
  text-align: center;
}
.app-game-page .action-area .game-playbtn,
.app-game-page .refresh-area .game-playbtn { margin-top: 0; }
.app-game-page .pai-gow-table { --bs-gutter-x: 0; }

/* ---------- KENO: number plate (fluid, full-width, touch-friendly) ---------- */
.app-game-page .keno-number-plate {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 5px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
}
.app-game-page .keno-number-plate .slot {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  padding: 0 !important;
  border: 1px solid rgba(240, 196, 25, 0.35);
  border-radius: 8px;
  background: #0a1424;
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background var(--app-ease), color var(--app-ease), border-color var(--app-ease), transform .12s ease;
  touch-action: manipulation;
  cursor: pointer;
}
.app-game-page .keno-number-plate .slot:active { transform: scale(.93); }
.app-game-page .keno-number-plate .slot:hover {
  border-color: var(--app-gold);
  background: rgba(240, 196, 25, 0.12);
}
.app-game-page .keno-number-plate .slot.active {
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  border-color: var(--app-gold);
  color: #1a1400 !important;
}
.app-game-page .keno-number-plate .win {
  background: linear-gradient(180deg, #34d399 0%, #16a34a 100%) !important;
  border-color: #34d399 !important;
  color: #fff !important;
}
.app-game-page .keno-number-plate .loss {
  background: #7f1d1d !important;
  border-color: #ef4444 !important;
  color: #fecaca !important;
}
.app-game-page .random-btn,
.app-game-page .refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-height: 42px;
  padding: 8px 14px !important;
  border: 1px solid var(--game-line) !important;
  border-radius: 10px !important;
  background: #0a1424 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.app-game-page .random-btn { color: #38bdf8 !important; }
.app-game-page .refresh-btn { color: #34d399 !important; }
.app-game-page .random-btn:hover,
.app-game-page .refresh-btn:hover { border-color: currentColor !important; }
.app-game-page .keno-history__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--game-line);
  border-radius: 10px;
  background: var(--game-surface-2);
}
.app-game-page .keno-history__list {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.app-game-page .keno-history-content__desc { color: var(--app-muted); font-size: 12.5px; }

/* ---------- BLACK JACK ---------- */
.app-game-page .app-game-intro {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
  text-align: center;
}
.app-game-page .app-game-intro__text {
  max-height: 132px;
  margin: 0 0 14px;
  overflow-y: auto;
  color: #cfd6e4;
  font-size: 12.5px;
  line-height: 1.65;
  text-align: left;
}
.app-game-page .app-game-intro__text > :last-child { margin-bottom: 0; }
.app-game-page .app-game-intro__suits {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 0;
}
.app-game-page .app-game-intro__suits::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 44px;
  border: 2px solid rgba(56, 189, 248, 0.5);
  border-bottom: 0;
  border-radius: 60px 60px 0 0;
}
.app-game-page .app-suit {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(56, 189, 248, 0.75);
  border-radius: 50%;
  background: #0a1424;
  color: #7dd3fc;
  font-size: 19px;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.25);
}
.app-game-page .app-suit--heart,
.app-game-page .app-suit--diamond { color: #f87171; border-color: rgba(248, 113, 113, 0.7); }
.app-game-page #dealer-cards,
.app-game-page #user-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.app-game-page #dealer-cards img,
.app-game-page #user-cards img {
  width: auto;
  height: 148px;
  max-width: 100%;
  flex: 0 0 auto;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.app-game-page .dealer-area,
.app-game-page .user-area { text-align: center; }
.app-game-page .dealer-image img {
  height: 68px;
  border: 2px solid var(--game-line);
  border-radius: 16px;
}
.app-game-page .dealer-image h4 {
  margin: 8px 0 4px;
  color: var(--app-gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-game-page .dealer-score,
.app-game-page .user-score {
  color: var(--app-muted);
  font-size: 12px;
  font-weight: 700;
}
.app-game-page #hit,
.app-game-page #stay {
  width: auto;
  min-width: 108px;
  height: auto;
  font-size: 15px;
}

/* ---------- CASINO DICE ---------- */
.app-game-page .dice-box .dice-item {
  min-height: 92px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: #0a1424;
  color: var(--app-gold);
  font-size: 46px;
  font-weight: 800;
  text-shadow: 0 0 22px rgba(240, 196, 25, 0.35);
}
.app-game-page .dice-game-range-slider { padding: 6px 2px 0; }
.app-game-page .dice-game-range-slider .range-holder { opacity: 0.55; }
.app-game-page .dice-box input[type="range"] { margin: 14px 0 4px; }
.app-game-page .dice-box input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--app-gold) 0%, rgba(240, 196, 25, 0.25) 100%);
}
.app-game-page .dice-box input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid #0a1424;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(240, 196, 25, 0.55);
}
.app-game-page .dice-box input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--app-gold) 0%, rgba(240, 196, 25, 0.25) 100%);
}
.app-game-page .dice-box input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid #0a1424;
  background: #fff;
}
.app-game-page .dice-box .input-wrapper { flex-wrap: nowrap; }
.app-game-page .dice-box .input-wrapper .input-group-text {
  min-width: 42px;
  padding: 0 8px;
  background: var(--game-surface-2);
  color: var(--app-gold);
  font-size: 11px;
  border-left: 1px solid var(--game-line);
}
.app-game-page .game-playbtn .min-btn,
.app-game-page .game-playbtn .max-btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--app-gold-2) 0%, var(--app-gold) 100%);
  color: #1a1400;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-game-page .game-playbtn .min-btn:hover,
.app-game-page .game-playbtn .max-btn:hover { filter: brightness(1.06); }

/* ---------- NUMBER GUESS ---------- */
.app-game-page .game-details-left.number--guess {
  width: 100%;
  padding: 26px 18px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
  text-align: center;
}
.app-game-page .number--guess .text { width: 100%; }
.app-game-page .number--guess h2 {
  margin: 0;
  padding: 0 46px;
  color: var(--app-gold);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.app-game-page .number--guess .vert-move-down,
.app-game-page .number--guess .vert-move-up { bottom: 50%; width: 42px; height: 42px; }
.app-game-page .number--guess .vert-move-up { left: 4px; }
.app-game-page .number--guess .vert-move-down { right: 4px; }
.app-game-page .numberGs {
  height: auto;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
}
.app-game-page .numberGs .guess {
  padding: 12px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.app-game-page .numberGs .guess::placeholder { font-size: 18px; opacity: 0.6; }
.app-game-page .startGame { margin-top: 0; }

/* ---------- ANDAR BAHAR / CARD TABLES ---------- */
.app-game-page .ab-card-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.app-game-page .ab-card { flex: 1 1 0; text-align: center; }
.app-game-page .ab-card-title {
  margin: 0 0 8px;
  color: var(--app-gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-game-page .ab-card-img img { width: 100%; max-width: 92px; border-radius: 6px; }
.app-game-page .headtail-slect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-block: 16px;
}
.app-game-page .headtail-slect__box {
  width: 100%;
  height: auto;
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--game-line);
  border-radius: 14px;
  background: #0a1424;
  transition: border-color var(--app-ease), background var(--app-ease), transform var(--app-ease);
}
.app-game-page .headtail-slect__box:hover {
  border-color: var(--app-gold);
  transform: translateY(-2px);
}
.app-game-page .headtail-slect__box.selected,
.app-game-page .headtail-slect__box.game-select-box.active {
  border-color: var(--app-gold);
  background: rgba(240, 196, 25, 0.1);
  box-shadow: 0 0 0 3px rgba(240, 196, 25, 0.12);
}
.app-game-page .headtail-slect__image img { width: 100%; max-width: 78px; }
.app-game-page .card-holder {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.app-game-page .card-thumb { flex: 1 1 0; max-width: 62px; }
.app-game-page .card-inner img { width: 100%; border-radius: 5px; }
.app-game-page .dealer-section__text,
.app-game-page .player-section__title,
.app-game-page .high-hand__title,
.app-game-page .dealer-section__title,
.app-game-page .low-slot__text {
  color: var(--app-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-game-page .pai-gow-table {
  padding: 16px;
  border: 1px solid var(--game-line);
  border-radius: var(--app-radius-lg);
  background: var(--game-surface-2);
}
.app-game-page .player-low-hand-shape {
  border: 1px dashed rgba(240, 196, 25, 0.4);
  border-radius: 8px;
}
/* ---------- NUMBER POOL: compact responsive stage ---------- */
.app-game-page .pool--card #slot-view {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
/* El JS usa translate() de hasta ~575px: en movil se recorta con el
   escalado aplicado en number_pool.blade.php (poolMotionScale). */
@media (max-width: 1023px) {
  .app-game-page .pool--card #slot-view { height: 240px; }
  .app-game-page .pool--card .fly { height: 240px !important; min-height: 240px !important; }
  .app-game-page .pool--card [id^="ball-"] { width: 34px !important; height: 34px !important; }
  .app-game-page .poolNumber { font-size: 11px !important; line-height: 20px !important; }
}
@media (max-width: 420px) {
  .app-game-page .pool--card #slot-view { height: 210px; }
  .app-game-page .pool--card .fly { height: 210px !important; min-height: 210px !important; }
  .app-game-page .pool--card [id^="ball-"] { width: 30px !important; height: 30px !important; }
}
.app-game-page .poolNumber { color: var(--app-gold); }
.app-game-page .roulette-wrapper { overflow-x: auto; }
.app-game-page .all-number table { font-size: 12px; }
.app-game-page .number-slot-box,
.app-game-page .number-slot-wrapper { border-radius: 14px; }

/* ---------- COIN / WHEEL / SLOT BOARDS ---------- */
.app-game-page .coin-flipbox,
.app-game-page .wheel-wrapper,
.app-game-page .spin-card {
  margin: 0 auto;
}
.app-game-page .wheel-wrapper .arrow img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.app-game-page .sld-wrapper { margin: 0 auto; }
.app-game-page .imgs.sld-wrapper { max-width: 240px; }

/* ---------- Modals (game rules) ---------- */
body.app-game-page .modal-content.section--bg {
  border: 1px solid var(--game-line);
  border-radius: 18px;
  background: var(--game-surface);
  color: var(--app-text);
}
body.app-game-page .modal-header {
  border-bottom: 1px solid var(--game-line);
}
body.app-game-page .modal-title {
  color: var(--app-gold);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.app-game-page .modal-body {
  max-height: 68vh;
  overflow-y: auto;
  color: #cfd6e4;
  font-size: 13px;
  line-height: 1.7;
}
body.app-game-page .modal .close {
  color: var(--app-muted);
  cursor: pointer;
}
/* ============ FUTURISTIC GOLD SUITE v2 shared panels ============ */
.app-game-page{--game-line:rgba(240,196,25,.18)}
.app-game-page .game--card,.app-game-page .headtail-wrapper,.app-game-page .headtail-body__flip,.app-game-page .pool--card,.app-game-page .poker-table,.app-game-page .bj-table,.app-game-page .andar-bahar-table,.app-game-page .game-details-left{border:1px solid var(--game-line)!important;border-radius:18px!important;background:radial-gradient(120% 70% at 50% -15%,rgba(240,196,25,.12),transparent 55%),linear-gradient(180deg,#142034 0%,#0d1626 100%)!important;box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;color:var(--app-text)}
.app-game-page .game-contet-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--app-muted)}
.app-game-page .game-contet-title .text,.app-game-page .game-contet-title .bal,.app-game-page .game-contet-title .balance{margin-left:auto;color:var(--app-gold)!important;font-size:16px;letter-spacing:0}
.app-game-page .input-inner-note,.app-game-page .form-text,.app-game-page small{color:var(--app-muted)!important}
.app-game-page .input-group{border:1px solid var(--game-line);border-radius:12px;overflow:hidden;background:#0a1424}
.app-game-page .input-group .input-group-text{border:0!important;background:transparent!important;color:var(--app-muted)!important;font-weight:800}
.app-game-page .input-group .form-control,.app-game-page .mines-number,.app-game-page .form--control{border:0!important;background:transparent!important;color:#fff!important;font-weight:800;box-shadow:none!important}
.app-game-page .mines-number{border:1px solid var(--game-line)!important;border-radius:12px!important;background:#0a1424!important}
.app-game-page .minmax-btn{color:var(--app-gold)!important;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.app-game-page .game-playbtn .btn,.app-game-page .betBtn,.app-game-page .cashoutBtn,.app-game-page .play-btn{min-height:48px;border:0!important;border-radius:12px!important;background:linear-gradient(180deg,var(--app-gold-2) 0%,var(--app-gold) 55%,#d4a400 100%)!important;color:#1a1400!important;font-weight:900!important;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 10px 24px rgba(240,196,25,.28),inset 0 1px 0 rgba(255,255,255,.5)!important}
.app-game-page .choose-card__number,.app-game-page .single-select,.app-game-page .card-box,.app-game-page .rps-select-box,.app-game-page .headtail-slect__box,.app-game-page .choice-btn{border:1px solid var(--game-line)!important;border-radius:14px!important;background:#0d1830!important;color:#fff!important}
.app-game-page .single-select.active,.app-game-page .choose-card__number.active,.app-game-page .card-box.active,.app-game-page .rps-select-box.active,.app-game-page .headtail-slect__box.active,.app-game-page .choice-btn.active{border-color:var(--app-gold)!important;background:linear-gradient(180deg,rgba(240,196,25,.24),rgba(240,196,25,.08))!important;box-shadow:0 0 0 1px var(--app-gold),0 10px 22px rgba(240,196,25,.22)!important;color:var(--app-gold)!important}
.app-game-page canvas{max-width:100%;height:auto!important}
.app-game-page .wheel-wrapper,.app-game-page .headtail-body,.app-game-page .roulette-game-spin,.app-game-page #slot-view{width:100%}
.app-game-page .sound--btn{width:42px;height:42px;flex:0 0 auto;border:1px solid var(--game-line)!important;border-radius:50%!important;background:#0a1424!important;color:var(--app-gold)!important}
.app-game-page .color-predict-top{border:1px solid var(--game-line);border-radius:14px;background:#0a1424;padding:12px}
.app-game-page .roulette-wrapper,.app-game-page .table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.app-game-page .roulette-wrapper table{min-width:560px}
.app-game-page .game--card,.app-game-page .pool--card,.app-game-page .headtail-wrapper,.app-game-page .keno-number-plate,.app-game-page #slot-view,.app-game-page .game-details-left{min-width:0;max-width:100%}
/* En movil cada juego usa una sola columna: tablero arriba, apuesta abajo. */
@media(max-width:1023px){.app-game-page .game--card>.row{display:flex!important;flex-direction:column!important}.app-game-page .game--card>.row>[class*=col-]{width:100%!important;max-width:100%!important;flex:0 0 100%!important}}
@media(max-width:991px){.app-game-page .game-wrapper{display:flex;flex-direction:column}.app-game-page .game-wrapper div:nth-child(1){order:1}.app-game-page .game-wrapper div:nth-child(2){order:2}.app-game-page .game-wrapper div:nth-child(3){order:3}}
@media(max-width:380px){.app-game-page .game-contet-title{font-size:11px}.app-game-page .game-playbtn .btn,.app-game-page .betBtn,.app-game-page .cashoutBtn,.app-game-page .play-btn{min-height:46px;font-size:13px}}

/* =========================================================
   GAME PAGES: responsive tuning
   ========================================================= */
@media (max-width: 1023px) {
  /* A game screen is immersive in the mobile app: the golden header replaces the
     bottom tab bar, exactly like the reference screens. */
  .app-game-page .app-bottom-nav { display: none !important; }
  body.app-game-page { padding-bottom: 0 !important; }
  .app-game-page .app-shell { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  /* full-bleed sticky golden header */
  .app-game-page .app-game-head {
    position: sticky;
    top: 0;
    z-index: 45;
    margin: 0 -16px 14px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px;
    border-radius: 0 0 18px 18px;
  }
  .app-game-page .app-game-head__title { font-size: 15px; }

  .app-game-page .row { --bs-gutter-x: 0; }
  .app-game-page .game--card,
  .app-game-page .custom--card.game--card,
  .app-game-page .pool--card,
  .app-game-page .headtail-wrapper,
  .app-game-page .headtail-body,
  .app-game-page .pai-gow-table {
    padding: 14px;
    border-radius: 16px;
  }
  .app-game-page .game--card { margin-bottom: 12px; }
  .app-game-page .game-playbtn { margin-top: 14px; }
  .app-game-page .btn--gradient { min-height: 50px; font-size: 14px !important; }
  .app-game-page .headtail-body { min-height: 260px; }
  .app-game-page .keno-number-plate { padding: 10px; gap: 4px; }
}

@media (max-width: 767px) {
  .app-game-page .app-game-balance { padding: 10px 12px; gap: 10px; }
  .app-game-page .app-game-balance__value { font-size: 18px; }
  .app-game-page .app-game-balance__icon { width: 34px; height: 34px; font-size: 18px; }

  .app-game-page #dealer-cards img,
  .app-game-page #user-cards img { height: 118px; }
  .app-game-page .dice-box .dice-item { font-size: 38px; min-height: 76px; }
  .app-game-page .poker-table__thumb { max-width: 56px; }
  .app-game-page .keno-number-plate { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
  .app-game-page .keno-number-plate .slot { height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; font-size: 11px; }
  .app-game-page .number--guess h2 { font-size: 16px; padding: 0 34px; }
  .app-game-page .headtail-slect__image img { max-width: 64px; }
}

@media (max-width: 374px) {
  .app-game-page .app-game-balance__unit { display: none; }
  .app-game-page .keno-number-plate { gap: 3px; padding: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .app-game-page .keno-number-plate .slot { height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1; font-size: 10px; }
  .app-game-page .card-item__thumb,
  .app-game-page .card-item__thumb img { max-width: 48px; }
  .app-game-page .poker-table { padding: 16px 8px !important; }
  .app-game-page .poker-table__thumb { max-width: 46px; }
}

/* Tablet: the poker hand list must not be squeezed next to the table */
@media (min-width: 768px) and (max-width: 1023px) {
  .app-game-page .card-item-list { grid-template-columns: 1fr; }
  .app-game-page .game--card > .row > .col-md-3,
  .app-game-page .game--card > .row > .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Desktop: keep the futuristic skin inside the classic container */
@media (min-width: 1024px) {
  .app-game-page .app-game-head { margin-top: 8px; }
  .app-game-page .game--card,
  .app-game-page .headtail-wrapper,
  .app-game-page .pai-gow-table { padding: 24px; }
  .app-game-page .game-playbtn { max-width: 420px; }
  .app-game-page .btn--gradient { font-size: 16px !important; }
}


/* ==========================================================================
   VESTIBULO v3  -> composicion de la imagen de referencia
   (barra dorada + 2 tarjetas de saldo + franja promo + tarjeta destacada +
    carrusel + barra dorada de desplazamiento + cuadricula 4 columnas + nav)
   Todo va precedido de body.app-lobby-page para NO tocar otras pantallas
   (perfil, transacciones, wallet o fichas de juego usan los mismos tokens).
   ========================================================================== */
body.app-lobby-page {
  --lb-gutter: clamp(12px, 2.2vw, 32px);
  --lb-line: rgba(240, 196, 25, 0.34);
  --lb-line-soft: rgba(240, 196, 25, 0.2);
  --lb-label: #a9b7e4; /* texto azul claro de la referencia, integrado en la paleta fria del proyecto */
  --lb-panel: linear-gradient(180deg, #122134 0%, #0c1727 100%);
  --lb-glow: rgba(240, 196, 25, 0.3);
  /* fondo a pantalla completa: cubre tambien los laterales en movil, tablet y escritorio */
  background-color: var(--app-bg) !important;
  background-image:
    radial-gradient(90% 42% at 50% 0%, rgba(240, 196, 25, 0.1), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(26, 54, 104, 0.55), transparent 62%),
    radial-gradient(70% 45% at 100% 100%, rgba(26, 54, 104, 0.4), transparent 62%),
    linear-gradient(180deg, #0a1626 0%, #070e18 58%, #060c15 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: calc(var(--app-nav-h) + 26px + env(safe-area-inset-bottom, 0px)) !important;
}

/* El vestibulo deja de ser un panel estrecho centrado */
body.app-lobby-page .app-shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 24px;
  background: transparent;
}
body.app-lobby-page .app-shell > .py-100 { padding: 0 !important; }
body.app-lobby-page .container {
  width: 100%;
  max-width: 100%;
  padding-left: var(--lb-gutter);
  padding-right: var(--lb-gutter);
}
/* el vestibulo reemplaza la cabecera y la miga de pan heredadas del tema */
body.app-lobby-page .header,
body.app-lobby-page .breadcrumb { display: none !important; }
/* en el vestibulo la rejilla legacy repetiria los mismos 19 juegos */
body.app-lobby-page .desktop-only .games-section-wrapper,
body.app-lobby-page .games-section-wrapper.desktop-only { display: none !important; }
body.app-lobby-page .games-section:has(> .games-section-inner > .games-section-wrapper) { padding: 0 !important; }
body.app-lobby-page .footer-area { padding-bottom: calc(var(--app-nav-h) + 18px); }

/* La interfaz del vestibulo se muestra a cualquier ancho (movil, tablet, PC) */
body.app-lobby-page .app-only { display: block !important; }
body.app-lobby-page .app-lobby { width: 100%; }

/* ---------- Barra superior dorada (flotante, redondeada) ---------- */
body.app-lobby-page .app-topbar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--lb-gutter) 10px;
  min-height: 0;
  background: linear-gradient(180deg, rgba(10, 22, 38, 0.96) 0%, rgba(10, 22, 38, 0.92) calc(100% - 14px), rgba(10, 22, 38, 0) 100%);
  backdrop-filter: blur(6px);
}
body.app-lobby-page .app-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: clamp(46px, 3vw + 34px, 66px);
  padding: 8px clamp(12px, 1vw + 8px, 22px);
  border-radius: clamp(14px, 1vw + 10px, 22px);
  background: linear-gradient(180deg, #fff0bd 0%, #f7d357 40%, #e5b514 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 0 26px var(--lb-glow);
}
body.app-lobby-page .app-userchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #3b2d05;
  font-size: clamp(13px, 1vw + 9px, 21px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.app-lobby-page .app-userchip i {
  font-size: clamp(24px, 1.6vw + 18px, 34px);
  color: #7c5d05;
}
body.app-lobby-page .app-userchip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-lobby-page a.app-userchip:hover { color: #3b2d05; }
body.app-lobby-page .app-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 6px 4px;
  border-radius: 12px;
  color: #3b2d05;
  font-size: clamp(13px, 1vw + 9px, 21px);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--app-ease), filter var(--app-ease);
}
body.app-lobby-page .app-topbar__cta i { font-size: clamp(22px, 1.4vw + 16px, 30px); }
body.app-lobby-page .app-topbar__cta:hover { color: #3b2d05; filter: brightness(1.06); }
body.app-lobby-page .app-topbar__cta:active { transform: scale(0.97); }
body.app-lobby-page .app-brand img { max-height: clamp(30px, 2vw + 22px, 44px); }
body.app-lobby-page .app-topbar__link { color: #3b2d05; font-size: clamp(11px, 0.7vw + 8px, 16px); }
body.app-lobby-page .app-topbar__link--solid { background: #111827; color: var(--app-gold-2); }
body.app-lobby-page .app-topbar__title { color: #3b2d05; font-size: clamp(14px, 1vw + 10px, 22px); }
body.app-lobby-page .app-topbar__title i { color: #7c5d05; }


/* ---------- Fila de saldo: dos tarjetas oscuras con borde dorado ---------- */
body.app-lobby-page .app-lobby-wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 0.8vw + 4px, 16px);
  margin-bottom: clamp(12px, 1.2vw, 20px);
}
body.app-lobby-page .app-balance {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: clamp(80px, 4vw + 58px, 148px);
  padding: clamp(12px, 1vw + 6px, 22px);
  border: 1px solid var(--lb-line);
  border-radius: 16px;
  background: var(--lb-panel);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(240, 196, 25, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
body.app-lobby-page .app-balance__body { display: block; min-width: 0; }
body.app-lobby-page .app-balance__value {
  display: block;
  margin: 0;
  color: var(--app-gold);
  font-size: clamp(26px, 2.6vw + 16px, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
body.app-lobby-page .app-balance__unit,
body.app-lobby-page .app-balance__label {
  display: block;
  margin: 4px 0 0;
  color: var(--app-gold-2);
  font-size: clamp(12px, 0.6vw + 9px, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.app-lobby-page .app-balance__unit { margin-top: 0; }
body.app-lobby-page .app-balance__art {
  width: clamp(38px, 3vw + 20px, 76px);
  height: auto;
  margin-left: auto;
  align-self: center;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}
body.app-lobby-page .app-balance--link { transition: transform var(--app-ease), filter var(--app-ease); }
body.app-lobby-page .app-balance--link:hover { filter: brightness(1.05); }
body.app-lobby-page .app-balance--link:active { transform: scale(0.99); }

/* ---------- Franja promocional (regalo + texto + flecha) ---------- */
body.app-lobby-page .app-lobby-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: clamp(40px, 2.6vw + 26px, 62px);
  padding: 8px clamp(14px, 1.2vw + 10px, 24px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
  border: 1.5px solid var(--lb-line);
  border-radius: var(--app-radius-pill);
  background: var(--lb-panel);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42), 0 0 20px rgba(240, 196, 25, 0.14);
  color: var(--app-gold);
  font-size: clamp(11px, 0.7vw + 8px, 18px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
}
body.app-lobby-page .app-lobby-promo__icon { font-size: clamp(18px, 1.2vw + 14px, 28px); color: var(--app-gold); flex-shrink: 0; }
body.app-lobby-page .app-lobby-promo__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-lobby-page .app-lobby-promo__meta {
  color: var(--lb-label);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
body.app-lobby-page .app-lobby-promo__arrow {
  flex-shrink: 0;
  margin-left: auto;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--app-gold);
  filter: drop-shadow(0 0 6px rgba(240, 196, 25, 0.55));
}
body.app-lobby-page .app-lobby-promo:hover { color: var(--app-gold); filter: brightness(1.06); }
body.app-lobby-page .app-lobby-promo:active { transform: scale(0.995); }

/* ---------- Titulos de seccion (azul claro, mayusculas) ---------- */
body.app-lobby-page .app-section-title {
  margin: 0 0 10px;
  color: var(--lb-label);
  font-size: clamp(12px, 0.6vw + 9px, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
}


/* ---------- Tarjeta destacada: imagen arriba, titulo debajo ---------- */
body.app-lobby-page .app-featured {
  display: block;
  margin: 0 0 clamp(18px, 1.6vw, 26px);
  padding: 0 0 clamp(12px, 1vw + 8px, 26px);
  border: 1px solid var(--lb-line-soft);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 120%, rgba(240, 196, 25, 0.1), transparent 60%),
    var(--lb-panel);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  text-decoration: none;
}
body.app-lobby-page .app-featured__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
body.app-lobby-page .app-featured__overlay {
  position: static;
  inset: auto;
  display: block;
  height: auto;
  padding: clamp(12px, 1vw + 8px, 26px) clamp(12px, 1.4vw, 28px) 0;
  background: none;
  text-align: center;
}
body.app-lobby-page .app-featured__name {
  display: block;
  margin: 0;
  color: #b7c2ee;
  font-size: clamp(24px, 2.4vw + 16px, 52px);
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.16;
  text-transform: uppercase;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}
body.app-lobby-page .app-featured:hover .app-featured__name { color: #ccd5f7; }

/* ---------- Carrusel horizontal + barra dorada de desplazamiento ---------- */
body.app-lobby-page .app-trend {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 0.8vw + 5px, 18px);
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
body.app-lobby-page .app-trend::-webkit-scrollbar { display: none; }
body.app-lobby-page .app-trend__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 31%;
  min-width: 0;
  scroll-snap-align: start;
  text-decoration: none;
}
body.app-lobby-page .app-trend__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--lb-line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: var(--lb-panel);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
}
body.app-lobby-page .app-trend__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.app-lobby-page .app-trend__name {
  color: var(--lb-label);
  font-size: clamp(10px, 0.4vw + 8px, 15px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-lobby-page .app-lobby-scrollbar {
  position: relative;
  height: 4px;
  margin: clamp(10px, 0.9vw, 16px) 0 clamp(18px, 1.6vw, 28px);
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
body.app-lobby-page .app-lobby-scrollbar > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  border-radius: var(--app-radius-pill);
  background: linear-gradient(90deg, rgba(240, 196, 25, 0.35), var(--app-gold));
  box-shadow: 0 0 10px rgba(240, 196, 25, 0.55);
}


/* ---------- Cuadricula TODOS LOS JUEGOS: etiqueta debajo del recuadro ---------- */
body.app-lobby-page .app-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw + 5px, 20px) clamp(8px, 0.8vw + 5px, 18px);
}
body.app-lobby-page .app-game-grid .app-game-card,
body.app-lobby-page .app-game-grid .app-game-card:first-child,
body.app-lobby-page .app-game-grid .app-game-card:nth-child(odd),
body.app-lobby-page .app-game-grid .app-game-card:nth-child(even) {
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}
body.app-lobby-page .app-game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}
body.app-lobby-page .app-game-card__thumb {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--lb-line-soft);
  border-radius: 16px;
  overflow: hidden;
  background: var(--lb-panel);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform var(--app-ease), border-color var(--app-ease);
}
body.app-lobby-page .app-game-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.app-lobby-page .app-game-card:hover .app-game-card__thumb { border-color: var(--app-gold); transform: translateY(-2px); }
body.app-lobby-page .app-game-card__title {
  position: static;
  inset: auto;
  padding: 0;
  background: none;
  color: var(--lb-label);
  font-size: clamp(11px, 0.45vw + 9px, 16px);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ---------- Buscador y bloque de bienvenida del vestibulo ---------- */
body.app-lobby-page .app-search { margin-bottom: clamp(14px, 1.4vw, 22px); }
body.app-lobby-page .app-search input {
  height: clamp(42px, 2.4vw + 30px, 60px);
  border: 1px solid var(--lb-line-soft);
  border-radius: 14px;
  background: var(--lb-panel);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
  font-size: clamp(13px, 0.5vw + 10px, 17px);
}
body.app-lobby-page .app-welcome {
  padding: clamp(16px, 1.4vw + 10px, 28px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
  border: 1px solid var(--lb-line);
  border-radius: 16px;
  background: var(--lb-panel);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
  text-align: left;
}
body.app-lobby-page .app-welcome__title {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.2vw + 11px, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.app-lobby-page .app-welcome__desc { margin: 6px 0 14px; color: var(--lb-label); font-size: clamp(12px, 0.5vw + 10px, 16px); }
body.app-lobby-page .app-welcome__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Navegacion inferior (INICIO / JUEGOS / BILLETERA / PERFIL) ---------- */
body.app-lobby-page .app-bottom-nav {
  display: flex !important;
  position: fixed;
  left: clamp(8px, 1vw, 16px);
  right: clamp(8px, 1vw, 16px);
  bottom: calc(clamp(8px, 1vw, 14px) + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  height: auto;
  padding: 8px 6px;
  border: 1px solid var(--lb-line-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, #0e1a2c 0%, #091120 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  justify-content: space-around;
  align-items: center;
  gap: 2px;
}
body.app-lobby-page .app-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 0;
  padding: 6px 2px;
  border-radius: 12px;
  color: #79839a;
  font-size: clamp(10px, 0.4vw + 8px, 14px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--app-ease), background var(--app-ease);
}
body.app-lobby-page .app-bottom-nav a i { font-size: clamp(22px, 1.2vw + 16px, 30px); }
body.app-lobby-page .app-bottom-nav a.active { color: var(--app-gold); text-shadow: 0 0 14px rgba(240, 196, 25, 0.45); }
body.app-lobby-page .app-bottom-nav a:hover,
body.app-lobby-page .app-bottom-nav a:focus-visible { color: var(--app-gold-2); }

/* ---------- Anchos grandes: misma composicion, mas columnas ---------- */
@media (min-width: 560px) {
  body.app-lobby-page .app-trend__item { flex-basis: 24%; }
}
@media (min-width: 768px) {
  body.app-lobby-page .app-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.app-lobby-page .app-trend__item { flex-basis: 20%; }
  body.app-lobby-page .container { padding-left: clamp(18px, 2.4vw, 40px); padding-right: clamp(18px, 2.4vw, 40px); }
}
@media (min-width: 1024px) {
  body.app-lobby-page .app-trend__item { flex-basis: 16%; }
  body.app-lobby-page .app-topbar { padding-top: 16px; }
}
@media (min-width: 1280px) {
  body.app-lobby-page .app-game-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  body.app-lobby-page .app-trend__item { flex-basis: 13%; }
}
@media (min-width: 1600px) {
  body.app-lobby-page .app-game-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  body.app-lobby-page .app-trend__item { flex-basis: 11%; }
}
@media (max-width: 400px) {
  body.app-lobby-page .app-lobby-wallet { gap: 8px; }
  body.app-lobby-page .app-lobby-promo { gap: 8px; padding-left: 12px; padding-right: 12px; }
  body.app-lobby-page .app-lobby-promo__text { font-size: clamp(10px, 2.7vw, 13px); }
  body.app-lobby-page .app-lobby-promo__meta { font-size: clamp(10px, 2.5vw, 12px); }
  body.app-lobby-page .app-balance { padding: 10px; }
}

/* ==========================================================================
   PANTALLA DE AJEDREZ  ->  composicion de la imagen de referencia
   (fondo negro azulado a pantalla completa + titulo dorado + tablero 8:5 +
    boton principal "Continuar"). Aislada con body.app-chess-page para no
    modificar las demas pantallas.
   ========================================================================== */
body.app-chess-page {
  background-color: var(--app-bg) !important;
  background-image:
    radial-gradient(88% 40% at 50% 4%, rgba(240, 196, 25, 0.12), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(26, 54, 104, 0.5), transparent 62%),
    radial-gradient(70% 45% at 100% 100%, rgba(26, 54, 104, 0.38), transparent 62%),
    linear-gradient(180deg, #0a1626 0%, #070e18 58%, #060c15 100%) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: calc(var(--app-nav-h) + 26px + env(safe-area-inset-bottom, 0px)) !important;
  /* Evita barras de desplazamiento horizontales en cualquier ancho. */
  overflow-x: hidden;
}
/* La pantalla reemplaza la cabecera y la miga de pan heredadas del tema. */
body.app-chess-page .header,
body.app-chess-page .breadcrumb { display: none !important; }
body.app-chess-page .app-shell {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 0 24px;
  background: transparent;
}
body.app-chess-page .app-shell > .py-100 { padding: 0 !important; }
body.app-chess-page .container {
  width: 100%;
  max-width: 100%;
  padding-left: clamp(14px, 3.4vw, 40px);
  padding-right: clamp(14px, 3.4vw, 40px);
}
body.app-chess-page .app-topbar {
  display: block;
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 clamp(6px, 1vw, 14px);
  padding: calc(8px + env(safe-area-inset-top, 0px)) clamp(14px, 3.4vw, 40px) 10px;
  min-height: 0;
  background: linear-gradient(180deg, rgba(10, 22, 38, 0.96) 0%, rgba(10, 22, 38, 0.92) calc(100% - 14px), rgba(10, 22, 38, 0) 100%);
  backdrop-filter: blur(6px);
}
body.app-chess-page .app-topbar__title { display: flex; align-items: center; gap: 10px; }
body.app-chess-page .app-topbar__title i { color: var(--app-gold); font-size: 20px; }
body.app-chess-page .app-topbar__title span { color: var(--app-gold); font-size: 18px; font-weight: 800; }
body.app-chess-page .footer-area { padding-bottom: calc(var(--app-nav-h) + 18px); }