/* ==========================================================================
   components.css — Component dùng chung cho cả index và lobby-fish
   ========================================================================== */

/* ------------------------------------------------------------------ Nút */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-auth-h);
  padding: 0 var(--s-4);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: .03em;
  text-align: center;
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--block { width: var(--btn-auth-w); max-width: 100%; }
.btn--upper { text-transform: uppercase; }

/* Viền — đo từ nút Đăng nhập */
.btn--ghost {
  background: var(--c-panel);
  color: var(--c-text);
  border: 1px solid var(--c-text);
}
.btn--ghost:hover { background: var(--c-panel-2); border-color: var(--c-gold); color: var(--c-gold); }

/* Vàng đặc — đo từ nút Đăng ký */
.btn--accent {
  background: var(--c-gold);
  color: var(--c-text-on-gold);
}
.btn--accent:hover { background: #fff06b; }

/* Đỏ đặc — đo từ nút CHƠI NGAY */
.btn--primary {
  background: var(--c-red);
  color: var(--c-text);
  border-radius: var(--r-xs);
  min-height: 32px;
  font-size: var(--fs-sm);
}
.btn--primary:hover { background: #ef1b1b; }

/* Pill viền vàng — đo từ nút Nhiều Trò Chơi Hơn */
.btn--pill-outline {
  background: transparent;
  color: var(--c-yellow);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  min-height: 34px;
  font-size: var(--fs-base);
}
.btn--pill-outline:hover { border-color: var(--c-gold); background: rgba(252, 228, 3, .08); }

/* Nút tròn điều hướng carousel */
.btn--circle {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: var(--r-round);
  background: rgba(0, 0, 0, .42);
  border: 1px solid var(--c-line-strong);
  color: var(--c-text);
}
.btn--circle:hover { background: rgba(0, 0, 0, .68); border-color: var(--c-gold); color: var(--c-gold); }
.btn--circle svg { width: 16px; height: 16px; }
.btn--circle[disabled] { opacity: .3; cursor: not-allowed; }
.btn--circle[disabled]:hover { background: rgba(0, 0, 0, .42); border-color: var(--c-line-strong); color: var(--c-text); }

/* ------------------------------------------------------- Tiêu đề section */

.section-head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.section-head__title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-lg);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-gold);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  background: linear-gradient(90deg, rgba(252, 228, 3, .14), transparent 72%);
  border-left: 4px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.section-head__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}

.section-title--plain {
  font-size: var(--fs-h2);
  color: var(--c-gold);
  padding-left: var(--s-5);
  border-left: 4px solid var(--c-gold);
  margin-bottom: var(--s-4);
}

/* ------------------------------------------------------------------ Hero */

.hero {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
}

.hero__viewport { overflow: hidden; }

.hero__track {
  display: flex;
  transition: transform var(--dur) var(--ease);
}

.hero__slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  aspect-ratio: 1300 / 420;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-6) var(--s-5) var(--s-4);
  background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent);
}

.hero__kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--s-1);
}

.hero__title {
  font-size: var(--fs-hero);
  color: var(--c-text);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.hero__prev, .hero__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.hero__prev { left: var(--s-3); }
.hero__next { right: var(--s-3); }

.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--s-2);
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  z-index: 2;
}

.hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  min-height: 0;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, .42);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.hero__dot:hover { background: #fff; }
.hero__dot[aria-current="true"] { background: var(--c-orange); transform: scale(1.28); }

/* ------------------------------------------------------- Dải Jackpot (3 cột) */
/* P01 đính chính C3: khối này dùng chung cho cả trang chủ và lobby */

.jackpot-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--s-5);
  align-items: start;
  background: linear-gradient(180deg, var(--c-panel) 0%, transparent 100%);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

.jackpot-row__col { min-width: 0; }
.jackpot-row__col + .jackpot-row__col { border-left: 1px solid var(--c-line); padding-left: var(--s-5); }

.jackpot-row__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}

.jackpot-row__head h2 { font-size: var(--fs-h2); color: var(--c-gold); }

/* Bộ đếm — giá trị TĨNH, dữ liệu mẫu */
.jackpot-meter {
  text-align: center;
  padding: var(--s-5) var(--s-4);
  background: radial-gradient(circle at 50% 36%, rgba(252, 228, 3, .2), transparent 62%), var(--c-panel-2);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
}

.jackpot-meter__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-orange);
}

.jackpot-meter__value {
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-yellow);
  text-shadow: 0 0 24px rgba(255, 255, 0, .32);
  margin: var(--s-2) 0;
}

.jackpot-meter__note {
  font-size: 11px;
  color: var(--c-text-faint);
}

/* Danh sách + bảng xếp hạng */
.jp-list { display: grid; gap: var(--s-2); }

.jp-list__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
  border: 1px solid transparent;
}

.jp-list__item:hover { border-color: var(--c-line); }

.jp-list__thumb {
  flex: 0 0 44px;
  width: 44px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, .62);
}

.jp-list__body { min-width: 0; flex: 1 1 auto; }

.jp-list__name {
  font-size: var(--fs-sm);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp-list__value {
  font-size: var(--fs-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-yellow);
}

/* --------------------------------------------------------- Thẻ danh mục */

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
}

.category-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.category-card:hover {
  transform: translateY(-5px);
  border-color: var(--c-gold);
}

.category-card__title {
  padding: var(--s-3) var(--s-2);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-gold);
}

.category-card__art {
  aspect-ratio: 140 / 150;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: 700;
  color: rgba(0, 0, 0, .48);
}

.category-card__foot { padding: var(--s-3); display: grid; place-items: center; }

/* ----------------------------------------------- Lưới tile game + carousel */

.tile-rail { position: relative; }

.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-4);
}

/* Biến thể cuộn ngang dùng cho trang chủ.
   Dùng flex thay grid: grid-auto-columns với minmax(0, …) cho phép cột co lại
   vừa khung nên phần tử không bao giờ tràn ra để cuộn được. */
.tile-grid--rail {
  display: flex;
  grid-template-columns: none;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
  /* Không đặt scroll-behavior ở đây: khi có smooth trong CSS, việc gán
     element.scrollLeft bị bỏ qua. Hành vi cuộn do app.js quyết định
     qua scrollTo(), có xét prefers-reduced-motion. */
}

.tile-grid--rail::-webkit-scrollbar { display: none; }

.tile-grid--rail > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - var(--s-4) * 4) / 5);
}

.game-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
  min-width: 0;
}

.game-tile__media {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: clamp(18px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.game-tile:hover .game-tile__media,
.game-tile:focus-within .game-tile__media {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .52);
}

.game-tile__title {
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-tile__btn { width: 100%; }

/* ---------------------------------------------- Bộ chọn nhà cung cấp (lobby) */

.provider-bar {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.provider-bar__hint {
  font-size: 11px;
  color: var(--c-text-faint);
  margin-bottom: var(--s-3);
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-2);
}

.provider-tab {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--provider-tab-h);
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .22);
  color: var(--c-text-dim);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.provider-tab:hover { border-color: var(--c-line-strong); color: var(--c-text); }

.provider-tab[aria-pressed="true"] {
  border-color: var(--c-gold);
  background: rgba(252, 228, 3, .12);
  color: var(--c-gold);
}

.provider-tab__chip {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, .66);
}

.provider-tab__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------ Khối tải ứng dụng */

.app-block {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: var(--s-6);
  align-items: center;
  background: linear-gradient(120deg, var(--c-panel), transparent);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-6);
}

.app-block__qrs { display: flex; gap: var(--s-6); flex-wrap: wrap; margin-top: var(--s-4); }
.app-block__qr { text-align: center; }
.app-block__qr img { width: 118px; height: 118px; border-radius: var(--r-sm); }
.app-block__qr figcaption { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-text-dim); }
.app-block__art { display: grid; place-items: center; }

/* ------------------------------------------------------- Dải logo đối tác */

.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-7);
  flex-wrap: wrap;
  padding: var(--s-6);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

/* --------------------------------------------------------------- Dialog */

.demo-dialog {
  width: min(92vw, 440px);
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  background: var(--c-panel);
  color: var(--c-text);
}

.demo-dialog::backdrop { background: var(--c-scrim); }

.demo-dialog__body { padding: var(--s-6); }
.demo-dialog__title { font-size: var(--fs-lg); color: var(--c-gold); margin-bottom: var(--s-3); }
.demo-dialog__text { color: var(--c-text-dim); font-size: var(--fs-base); }
.demo-dialog__foot { display: flex; justify-content: flex-end; padding: 0 var(--s-6) var(--s-6); }

/* ------------------------------------------- Banner cảnh báo bản demo */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(252, 228, 3, .1);
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-text-dim);
}

.demo-banner strong { color: var(--c-gold); }

/* ------------------------------------------------- Bề mặt giữ chỗ nguyên gốc */
/* Mọi "ảnh" trò chơi trong bản dựng là gradient CSS sinh ra tại chỗ.
   Không có artwork nào được sao chép từ bất kỳ nguồn nào. */

.ph {
  background:
    linear-gradient(145deg,
      hsl(var(--hue, 30) 82% 56%) 0%,
      hsl(calc(var(--hue, 30) + 26) 78% 34%) 100%);
  position: relative;
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .09) 0 10px,
      transparent 10px 20px);
  border-radius: inherit;
  pointer-events: none;
}

.ph > * { position: relative; z-index: 1; }

/* ==========================================================================
   RESPONSIVE cho component — thiết kế mới
   ========================================================================== */

@media (max-width: 1199px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile-grid--rail > * { flex-basis: calc((100% - var(--s-4) * 3) / 4); }
  .provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .jackpot-row { grid-template-columns: 1fr 1fr; }
  .jackpot-row__col + .jackpot-row__col { border-left: 0; padding-left: 0; }
  .jackpot-row__col--meter { grid-column: 1 / -1; order: -1; }
}

@media (max-width: 991px) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile-grid--rail > * { flex-basis: calc((100% - var(--s-4) * 2) / 3); }
  .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-block { grid-template-columns: 1fr; }
  .app-block__art { display: none; }
}

@media (max-width: 767px) {
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid--rail > * { flex-basis: calc((100% - var(--s-4)) / 2); }
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .jackpot-row { grid-template-columns: 1fr; padding: var(--s-4); }

  /* Ty le 1300/420 chi cho ~121px chieu cao o 375px, khong du cho caption
     nen chu bi de len anh. Lam hero cao hon va dat caption tren nen dac. */
  .hero__slide { aspect-ratio: 7 / 5; }

  .hero__caption {
    padding: var(--s-3);
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 60%, rgba(0, 0, 0, .55) 85%, transparent);
  }

  .hero__title { font-size: 20px; }
  .hero__kicker { font-size: 10px; }
  .hero__dots { bottom: 64px; }
  .hero__prev, .hero__next { display: none; }
  .section-head__title { font-size: var(--fs-base); }
  .brand-strip { gap: var(--s-5); padding: var(--s-5) var(--s-3); }
}