/* Non-critical styles for Indiluck landing page */

.sec{padding:34px 0}
.sec.alt{background:var(--bg2)}
.sec h2{font-size:22px;font-weight:800;text-align:center;margin-bottom:20px;line-height:1.3}

.prose h2{text-align:left;margin-bottom:14px}
.prose p{color:var(--muted);font-size:15px;margin-bottom:12px}

/* Join now image row */
.join-gallery{
  margin:20px auto 8px;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  gap:10px;
  max-width:920px;
}
.join-gallery::-webkit-scrollbar{height:0}
.join-item{
  flex:0 0 calc((100% - 10px) / 2);
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow);
  text-align:center;
}
.join-item img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:initial;
  background:transparent;
  display:block;
}
.join-item span{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  min-height:34px;
  padding:8px 6px 10px;
  color:var(--txt);
  text-transform:none;
}

/* Hot games horizontal scroll */
.grail{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.grail::-webkit-scrollbar{height:0}
.gcard{flex:0 0 auto;width:150px;scroll-snap-align:start;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
  transition:transform 0.2s, box-shadow 0.2s}
.gcard:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.6)}
.gcard .thumb{
  height:122px;
  padding:14px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:10px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,244,180,.28), transparent 34%),
    linear-gradient(145deg,#3a2a10 0%,#1f1a12 58%,#12100c 100%);
}
.gcard .thumb.game-tone-blue{
  background:
    radial-gradient(circle at 50% 16%, rgba(184,233,255,.26), transparent 34%),
    linear-gradient(145deg,#12324a 0%,#151d26 58%,#0c1118 100%);
}
.gcard .thumb.game-tone-red{
  background:
    radial-gradient(circle at 50% 16%, rgba(255,190,190,.25), transparent 34%),
    linear-gradient(145deg,#451615 0%,#241615 58%,#120c0c 100%);
}
.gcard .thumb.game-tone-green{
  background:
    radial-gradient(circle at 50% 16%, rgba(204,247,164,.24), transparent 34%),
    linear-gradient(145deg,#203915 0%,#182115 58%,#0d120b 100%);
}
.gcard .thumb::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1px solid rgba(232,184,75,.28);
  border-radius:14px;
  pointer-events:none;
}
.gcard .thumb::after{
  content:'';
  position:absolute;
  width:84px;
  height:84px;
  border-radius:50%;
  background:rgba(232,184,75,.13);
  box-shadow:0 0 30px rgba(232,184,75,.28);
  pointer-events:none;
  z-index:0;
}
.gcard .thumb.game-tone-blue::after{background:rgba(68,197,255,.12);box-shadow:0 0 30px rgba(68,197,255,.25)}
.gcard .thumb.game-tone-red::after{background:rgba(255,107,107,.12);box-shadow:0 0 30px rgba(255,107,107,.24)}
.gcard .thumb.game-tone-green::after{background:rgba(140,198,63,.12);box-shadow:0 0 30px rgba(140,198,63,.24)}
.game-icon-badge{
  width:58px;
  height:58px;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,#fff3a1,#e8b84b 58%,#b87909);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -5px 10px rgba(0,0,0,.25),
    0 9px 14px rgba(0,0,0,.55);
}
.game-tone-blue .game-icon-badge{background:linear-gradient(180deg,#b8e9ff,#44c5ff 58%,#006a9c)}
.game-tone-red .game-icon-badge{background:linear-gradient(180deg,#ffc0c0,#ff6b6b 58%,#9f1a1a)}
.game-tone-green .game-icon-badge{background:linear-gradient(180deg,#ccf7a4,#8cc63f 58%,#3f7d12)}
.game-icon-img{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
  filter:brightness(0) saturate(100%) invert(9%) sepia(11%) saturate(756%) hue-rotate(356deg) brightness(96%) contrast(94%) drop-shadow(0 1px 0 rgba(255,255,255,.28));
}
.gname{
  font-size:13px;
  font-weight:900;
  color:#ffffff;
  text-align:center;
  text-shadow:0 2px 4px rgba(0,0,0,0.8);
  letter-spacing:.2px;
  position:relative;
  z-index:1;
}
.gcard .meta{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;font-size:12px;background:rgba(0,0,0,0.2)}
.gcard .meta .hot{color:var(--green);font-weight:800;display:flex;align-items:center;gap:4px}
.gcard .meta .play{color:var(--gold);font-weight:800;background:rgba(232,184,75,0.1);padding:4px 10px;border-radius:999px}

/* Payments chips */
.pay .pchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pchips span{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;font-weight:700;font-size:14px}

/* Why choose list */
.why-lead{font-weight:700;margin-bottom:14px;text-align:center}
.why-list{list-style:none;max-width:720px;margin:0 auto}
.why-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;font-size:14px}

/* Final CTA */
.finalcta{text-align:center;padding:40px 16px;
  background:radial-gradient(120% 120% at 50% 0%,#241a05 0%,var(--bg) 65%)}

/* Footer */
.ft{background:#080808;border-top:1px solid var(--line);padding:26px 0 30px;text-align:center}
.ft .brand{display:flex;justify-content:center;margin-bottom:14px}
.ft .brand b span{color:var(--gold)}
.ft .disc{color:var(--muted);font-size:12px;max-width:720px;margin:0 auto 10px;line-height:1.5}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px auto 10px;font-size:12px}
.legal-links a{color:var(--gold);font-weight:700}
.ft .cpy{color:#6b6760;font-size:12px}

@media(min-width:720px){
  .sec h2{font-size:28px}
  .join-gallery{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    overflow:visible;
  }
  .join-item{flex:auto}
  .gcard{width:180px}
  .gcard .thumb{height:140px}
}
