/* =========================================================
   Teen Patti Master – Download App page
   Loaded after style.css and pages.css (shared breadcrumb, panel,
   check-list, notice, CTA banner and toast live in pages.css).
   ========================================================= */

/* ---------- Hero ---------- */
.hero--download { padding-top: 22px; }
.hero--download .hero__bg {
  background:
    linear-gradient(90deg, rgba(14, 2, 4, .93) 0%, rgba(40, 4, 8, .74) 40%, rgba(40, 4, 8, .25) 72%, rgba(14, 2, 4, .45) 100%),
    linear-gradient(180deg, rgba(12, 2, 3, .2) 0%, rgba(12, 2, 3, 0) 55%, var(--bg) 100%),
    url("../assets/second%20background.webp") center 45% / cover no-repeat;
}
.hero--download .hero__title { font-size: clamp(32px, 4vw, 48px); }
.hero--download .hero__actions .btn--primary { animation: ctaGlow 2.6s ease-in-out infinite; }

/* wider text column so the four meta chips sit on one row */
.hero--download .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.hero--download .hero__content { max-width: 600px; }

.dl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.dl-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(20, 3, 5, .6);
  border: 1px solid var(--line-red);
  backdrop-filter: blur(4px);
}
.dl-meta svg { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--grad-gold); color: var(--red-deep); }

.hero__note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.hero__note svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--gold); }

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 6px 22px rgba(211, 18, 28, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 6px 34px rgba(255, 60, 40, .75), 0 0 0 4px rgba(255, 197, 61, .16), inset 0 1px 0 rgba(255, 255, 255, .35); }
}

/* ---------- APK details ---------- */
.dl-info {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(160, 14, 22, .25), transparent 70%),
    linear-gradient(180deg, var(--bg), #1a0407);
}
.dl-info__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.spec-list { margin: 0 0 22px; }
.spec-list__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px dashed rgba(255, 190, 70, .18); }
.spec-list__row:last-child { border-bottom: 0; }
.spec-list dt { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.spec-list dt svg { width: 18px; height: 18px; color: var(--gold); }
.spec-list dd { margin: 0; font-size: 14px; font-weight: 600; color: #fff; text-align: right; }
.spec-list dd.text-gold { color: transparent; }

/* ---------- Install steps ---------- */
.dl-steps { background: linear-gradient(180deg, #1a0407, #140304); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps::before {
  content: "";
  position: absolute;
  top: 63px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 197, 61, .6) 15%, rgba(255, 60, 40, .75) 50%, rgba(255, 197, 61, .6) 85%, transparent);
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 26px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--grad-card);
  border: 1px solid var(--line-red);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover { transform: translateY(-5px); border-color: var(--line-gold); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 50, 30, .3); }
.step:hover .icon-ring { transform: scale(1.06) rotate(-6deg); }
.step__num {
  position: absolute;
  top: 12px; right: 14px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .85;
}
.step .icon-ring { margin-bottom: 18px; }
.step__title { margin-bottom: 8px; font-size: 17px; font-weight: 700; color: var(--gold); }
.step__text { font-size: 13.5px; color: var(--muted); }
.step__text strong { color: #fff; font-weight: 600; }

/* ---------- Why official ---------- */
.dl-why {
  padding-top: 30px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 30%, rgba(140, 10, 18, .3), transparent 70%),
    linear-gradient(180deg, #140304, #1a0407);
}
.dl-why .section-head { max-width: 880px; }

/* ---------- Games tiles ---------- */
.dl-games { padding-top: 24px; background: linear-gradient(180deg, #1a0407, #150305); }
.game-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 10px 20px;
  text-align: center;
  border-radius: var(--radius);
  background: var(--grad-card);
  border: 1px solid var(--line-red);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.game-tile:hover { transform: translateY(-5px); border-color: var(--line-gold); box-shadow: 0 0 22px rgba(255, 50, 30, .3); }
.game-tile:hover .icon-ring { transform: scale(1.08) rotate(-6deg); }
.game-tile__name { font-size: 14.5px; font-weight: 600; color: #fff; }

/* ---------- FAQ ---------- */
.dl-faq { padding-top: 20px; background: linear-gradient(180deg, #150305, #0f0203); }
.dl-faq .container { max-width: 960px; }
.dl-faq .section-head { margin-bottom: 24px; }
.dl-faq .faq { margin-top: 0; }

/* ---------- Mobile sticky bar ---------- */
.dl-sticky { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  /* undo the desktop 1.12fr/1fr split so the hero stacks like the homepage */
  .hero--download .hero__inner { grid-template-columns: 1fr; }
  .hero--download .breadcrumb ol, .dl-meta, .hero__note { justify-content: center; }
  .dl-info__grid { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps::before { display: none; }
  .game-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .dl-meta { gap: 8px; }
  .dl-meta li { padding: 4px 12px 4px 5px; font-size: 12px; }
  .dl-meta svg { width: 22px; height: 22px; }

  .spec-list dt, .spec-list dd { font-size: 13.5px; }

  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { flex-direction: row; align-items: center; gap: 16px; padding: 18px 16px; text-align: left; }
  .step .icon-ring { margin-bottom: 0; }
  .step__num { top: 10px; right: 12px; font-size: 22px; }
  .step__title { padding-right: 28px; }

  .game-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .dl-sticky {
    position: fixed;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(40, 5, 9, .97), rgba(16, 2, 4, .98));
    border: 1px solid var(--line-gold);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 50, 30, .3);
    visibility: hidden;
    transform: translateY(140%);
    transition: transform .35s var(--ease), visibility .35s;
  }
  .dl-sticky.is-visible { visibility: visible; transform: none; }
  .dl-sticky img { width: 52px; height: auto; }
  .dl-sticky__text { flex: 1; min-width: 0; line-height: 1.3; }
  .dl-sticky__text strong { display: block; font-size: 14px; color: #fff; }
  .dl-sticky__text span { font-size: 12px; color: var(--muted); }
  .dl-sticky .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }

  .site-footer { padding-bottom: 96px; }
  .toast { bottom: 88px; }
}