/* Teen Patti Craze — colour theme (light).
   Loaded after mmtp-site.css. The layout and the white/light surfaces come from that
   file; this one swaps its red accent for the teenpaticraze.in palette: maroon #410028,
   the #8F072B → #851C64 → #43074E gradient and gold #FFD700 / #E58010. */
:root {
  --red: #851c64;
  --red-d: #410028;
  --red-soft: #fbeff6;
  --red-line: #efc9df;
  --ink: #2a0019;
  --ink-2: #3f3340;
  --muted: #74667a;
  --line: #eee3ea;
  --bg: #ffffff;
  --bg-soft: #fbf6f9;
  --bg-pink: #fdf3f8;
  --bg-mint: #fbf6f9;
  --gold: #e5a100;
  --purple: #703787;
  --dark: #410028;
  --band: linear-gradient(90deg, #8f072b 1%, #851c64 50%, #43074e 100%);
  --shadow: 0 6px 22px rgba(65, 0, 40, 0.07);
  --shadow-lg: 0 18px 40px rgba(65, 0, 40, 0.13);
}
::selection {
  background: #851c64;
  color: #fff;
}

/* buttons */
.btn-red {
  background: var(--band);
  color: #fff;
  box-shadow: 0 8px 20px rgba(133, 28, 100, 0.28);
}
.btn-red:hover {
  background: linear-gradient(90deg, #6e0522, #6c1651 50%, #35063d);
}

/* logo */
.logo {
  gap: 10px;
}
.logo svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 4px 8px rgba(133, 28, 100, 0.25));
}
.logo-txt .l1 {
  color: #2a0019;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.logo-txt .l2 {
  background: var(--band);
  color: #ffd700;
  font-size: 0.82rem;
  letter-spacing: 0.32em;
  padding: 3px 4px 4px 8px;
  text-align: center;
}

/* header: plain hairline + soft shadow */
.site-header {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 14px rgba(65, 0, 40, 0.06);
}
.main-nav a[aria-current="page"]::after {
  background: var(--band);
}

/* hero */
.hero {
  background: linear-gradient(
    115deg,
    #fff 0%,
    #fff 42%,
    #fbeef6 70%,
    #f6e2f0 100%
  );
}
.hero::before {
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.2),
    rgba(133, 28, 100, 0.07) 55%,
    transparent 70%
  );
}
.phone-screen {
  background: linear-gradient(160deg, #851c64, #410028 55%, #2a0019);
}
.phone-top .dep {
  background: #ffd700;
  color: #410028;
}
.phone-brand {
  color: #ffd700;
}

/* sections */
.section.pink {
  background: linear-gradient(90deg, #fdf3f8, #fff 60%, #fdf3f8);
}
.media-frame {
  background: var(--band);
}

/* icon badges */
.fi.red {
  background: #fbe4f1;
  color: #851c64;
}
.fi.gold {
  background: #fff6d6;
  color: #c98a00;
}
.fi.purple {
  background: #f3e6f8;
  color: #703787;
}

/* download band */
.dl-band {
  background: linear-gradient(100deg, #fff 0%, #fff 55%, #fbeef6 100%);
}
.check-list li::before {
  background-color: #851c64;
}

/* steps */
.step {
  background: #fbf6f9;
  border-color: #f0e2ea;
}

/* responsible gaming band */
.rg-band {
  background: linear-gradient(90deg, #fbf3f8, #fff);
  border-color: #f0e2ea;
}
.rg-18 {
  border-color: #851c64;
}

/* dark bands: teenpaticraze maroon */
.cta-band {
  background: radial-gradient(
    900px 400px at 85% 50%,
    #851c64 0%,
    #410028 55%,
    #2a0019 100%
  );
}
.cta-band p {
  color: #f3dfea;
}
.cta-band .eyebrow {
  color: #ffd700;
}
.cta-band .hl {
  color: #ffd700;
}
.side-dl {
  background: var(--band);
}
.side-dl p {
  color: #f3dfea;
}

/* tables */
.table-wrap th,
.post-body th {
  background: #410028;
}

/* footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: #fdf8fb;
}
.foot-bottom a {
  color: #851c64;
}
/* on maroon bands the CTA switches to gold so it stands out */
.cta-band .btn-red,
.side-dl .btn-red {
  background: linear-gradient(108deg, #ffe36b 0%, #ffd700 45%, #e58010 100%);
  color: #410028;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- components added for the teenpaticraze content ---------- */
/* screenshot strip (game pages) */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.shots img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-snap-align: start;
  background: #2a0019;
}
/* trust / stats row (home) */
.stat-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 760px) {
  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat-row li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.stat-row .fi {
  margin: 0;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  font-size: 22px;
}
.stat-row b {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.25;
}
/* single-column long-form pages */
.wrap.narrow {
  max-width: 880px;
}
.hero .byline {
  margin: -8px 0 18px;
  font-size: 0.82rem;
}
/* FAQ question keeps its heading level for SEO but looks like the summary text */
.faq-q {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
  margin: 0;
  color: inherit;
}
.faq-a > *:last-child {
  margin-bottom: 0;
}
/* buttons inside long-form content */
.prose .btn {
  text-decoration: none;
  margin: 4px 0 14px;
}
.prose .btn-red,
.prose .btn-red:hover {
  color: #fff;
}
/* trust chips ("18+ Only", "UPI Supported" …) */
.prose ul.trust-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prose ul.trust-list li {
  margin: 0;
  padding: 6px 14px 6px 32px;
  border: 1px solid var(--red-line);
  border-radius: 30px;
  background: var(--red-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23851c64' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    12px center/13px no-repeat;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}