/*!
 * pinas77 free - layout stylesheet (mobile-first)
 * Palette: #CD5C5C | #B03060 | #A9A9A9 | #FF6347 | #2D2D2D
 * All custom classes use the sc3c- prefix. English comments only.
 */
:root{
  --sc3c-primary:#CD5C5C; --sc3c-secondary:#B03060; --sc3c-accent:#FF6347;
  --sc3c-muted:#A9A9A9; --sc3c-bg:#2D2D2D; --sc3c-bg-alt:#1c1c1c; --sc3c-surface:#3a3a3a;
  --sc3c-text:#f5f5f5; --sc3c-text-soft:#d8d8d8; --sc3c-border:rgba(205,92,92,0.35);
  --sc3c-gold:#f5c34a; --sc3c-radius:14px; --sc3c-shadow:0 10px 26px rgba(0,0,0,0.45);
  --sc3c-header-h:6rem; --sc3c-bottom-h:6.2rem;
}
*{box-sizing:border-box}
html{font-size:62.5%; -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  background:radial-gradient(circle at top,#3a2424 0%,var(--sc3c-bg) 55%,var(--sc3c-bg-alt) 100%);
  color:var(--sc3c-text); line-height:1.5rem; font-size:1.4rem; overflow-x:hidden; min-height:100vh;
}
img{max-width:100%; display:block}
a{color:var(--sc3c-accent); text-decoration:none}
a:hover{color:var(--sc3c-gold)}
h1,h2,h3,h4{margin:0 0 1rem; line-height:1.25; color:var(--sc3c-text)}
h1{font-size:2.4rem} h2{font-size:2rem} h3{font-size:1.7rem} h4{font-size:1.5rem}
p{margin:0 0 1rem}

.sc3c-container{width:100%; max-width:430px; margin:0 auto; padding:0 1.2rem}
.sc3c-wrapper{padding-top:var(--sc3c-header-h); padding-bottom:calc(var(--sc3c-bottom-h) + 2rem); width:100%}

/* Header */
.sc3c-header{position:fixed; top:0; left:0; right:0; z-index:1000;
  background:linear-gradient(135deg,var(--sc3c-secondary),var(--sc3c-primary));
  box-shadow:0 4px 18px rgba(0,0,0,0.4)}
.sc3c-header-inner{max-width:430px; margin:0 auto; padding:0.8rem 1rem;
  display:flex; align-items:center; gap:0.8rem}
.sc3c-logo{display:flex; align-items:center; gap:0.6rem; color:#fff;
  font-weight:700; font-size:1.6rem; flex:1; min-width:0}
.sc3c-logo img{width:3rem; height:3rem; border-radius:50%; border:2px solid var(--sc3c-gold)}
.sc3c-logo span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sc3c-header-actions{display:flex; align-items:center; gap:0.6rem}

/* Buttons */
.sc3c-btn{display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  border:0; border-radius:999px; padding:0.7rem 1.4rem; font-size:1.3rem; font-weight:700;
  cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  text-decoration:none; min-height:3.6rem}
.sc3c-btn-login{background:#fff; color:var(--sc3c-secondary)}
.sc3c-btn-register{background:var(--sc3c-gold); color:#2D2D2D}
.sc3c-btn-cta{background:linear-gradient(135deg,var(--sc3c-accent),var(--sc3c-secondary));
  color:#fff; width:100%; padding:1.1rem; font-size:1.5rem}
.sc3c-btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,0.35)}
.sc3c-icon-btn{background:rgba(255,255,255,0.12); color:#fff; border:0; border-radius:50%;
  width:3.6rem; height:3.6rem; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.6rem; transition:background .2s ease}
.sc3c-icon-btn:hover{background:rgba(255,255,255,0.24)}

/* Mobile menu drawer */
.sc3c-menu-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.65); opacity:0;
  visibility:hidden; transition:opacity .25s ease; z-index:9998}
.sc3c-backdrop-visible{opacity:1; visibility:visible}
.sc3c-mobile-menu{position:fixed; top:0; right:-85%; width:80%; max-width:320px; height:100%;
  background:var(--sc3c-bg-alt); z-index:9999; padding:2rem 1.4rem; transform:translateX(0);
  transition:right .3s ease; overflow-y:auto; box-shadow:-8px 0 30px rgba(0,0,0,0.5)}
.proc85-menu-open{right:0}
.sc3c-mobile-menu h3{color:var(--sc3c-gold); font-size:1.5rem; margin-bottom:1rem;
  border-bottom:1px solid var(--sc3c-border); padding-bottom:0.6rem}
.sc3c-mobile-menu a{display:flex; align-items:center; gap:0.8rem; color:var(--sc3c-text);
  padding:1rem 0.6rem; border-radius:8px; font-size:1.4rem; transition:background .2s ease,color .2s ease}
.sc3c-mobile-menu a:hover{background:rgba(205,92,92,0.15); color:var(--sc3c-gold)}
.sc3c-close-row{display:flex; justify-content:flex-end; margin-bottom:1rem}

/* Carousel */
.sc3c-carousel{position:relative; border-radius:var(--sc3c-radius); overflow:hidden;
  box-shadow:var(--sc3c-shadow); margin:1rem 0}
.sc3c-slide{position:relative; display:none; cursor:pointer}
.proc85-slide-active,.sc3c-slide:first-child{display:block}
.sc3c-slide img{width:100%; height:18rem; object-fit:cover; border:0}
.sc3c-slide-caption{position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.85)); padding:1.4rem 1.2rem 1.6rem}
.sc3c-slide-caption h3{color:#fff; margin:0 0 .3rem; font-size:1.6rem}
.sc3c-slide-caption p{margin:0; color:var(--sc3c-text-soft); font-size:1.2rem}
.sc3c-carousel-dots{position:absolute; bottom:0.8rem; right:1rem; display:flex; gap:0.4rem}
.proc85-carousel-dot{width:0.8rem; height:0.8rem; border-radius:50%;
  background:rgba(255,255,255,0.45); border:0; cursor:pointer; padding:0}
.proc85-dot-active{background:var(--sc3c-gold)}
.sc3c-carousel-arrow{position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); color:#fff; border:0; width:3rem; height:3rem;
  border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex;
  align-items:center; justify-content:center}
#proc85-carousel-prev{left:0.6rem} #proc85-carousel-next{right:0.6rem}

/* Sections */
.sc3c-section{margin:1.6rem 0; padding:1.4rem;
  background:rgba(255,255,255,0.04); border:1px solid var(--sc3c-border);
  border-radius:var(--sc3c-radius)}
.sc3c-section-title{display:flex; align-items:center; gap:0.8rem; margin-bottom:1.2rem}
.sc3c-section-title h2{margin:0; font-size:1.8rem; flex:1}
.sc3c-section-title .material-icons,
.sc3c-section-title .fas,
.sc3c-section-title .bi{color:var(--sc3c-gold); font-size:2.2rem}
.sc3c-cat-header{display:flex; align-items:center; justify-content:space-between; margin:2rem 0 1rem}
.sc3c-cat-header h2{margin:0; font-size:1.7rem; display:inline-flex; align-items:center; gap:0.6rem}
.sc3c-cat-header .sc3c-cat-link{font-size:1.2rem; color:var(--sc3c-gold); font-weight:600}

/* Game grid */
.sc3c-game-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem}
.sc3c-game-card{background:var(--sc3c-surface); border-radius:12px; overflow:hidden;
  text-align:center; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease;
  border:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column}
.sc3c-game-card:hover{transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(205,92,92,0.35); border-color:var(--sc3c-primary)}
.sc3c-game-card img{width:100%; aspect-ratio:1/1; object-fit:cover; background:#222}
.sc3c-game-name{font-size:1.15rem; color:var(--sc3c-text-soft); padding:0.5rem 0.4rem 0.6rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.sc3c-game-badge{position:relative}
.sc3c-game-badge::before{content:"HOT"; position:absolute; top:0.4rem; left:0.4rem;
  background:var(--sc3c-accent); color:#fff; font-size:0.95rem; padding:0.15rem 0.5rem;
  border-radius:6px; z-index:2; font-weight:700}
.sc3c-game-badge.sc3c-badge-new::before{content:"NEW"; background:var(--sc3c-gold); color:#2D2D2D}

/* Info cards & stats */
.sc3c-card-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.sc3c-info-card{background:linear-gradient(135deg,rgba(205,92,92,0.2),rgba(176,48,96,0.15));
  border:1px solid var(--sc3c-border); border-radius:12px; padding:1.2rem}
.sc3c-info-card .sc3c-info-icon{font-size:2.4rem; color:var(--sc3c-gold); margin-bottom:0.6rem}
.sc3c-info-card h3{font-size:1.4rem; margin:0 0 0.4rem}
.sc3c-info-card p{font-size:1.2rem; color:var(--sc3c-text-soft); margin:0}
.sc3c-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0.8rem; text-align:center; margin:1rem 0}
.sc3c-stat-box{background:rgba(0,0,0,0.35); border-radius:10px; padding:1rem 0.6rem}
.sc3c-stat-num{display:block; color:var(--sc3c-gold); font-size:1.6rem; font-weight:700}
.sc3c-stat-label{display:block; font-size:1.1rem; color:var(--sc3c-text-soft); margin-top:0.2rem}

/* Testimonials */
.sc3c-testimonials{display:grid; gap:0.8rem}
.sc3c-testimonial{background:rgba(0,0,0,0.3); border-left:4px solid var(--sc3c-accent);
  border-radius:8px; padding:1rem}
.sc3c-testimonial-stars{color:var(--sc3c-gold); font-size:1.2rem; margin-bottom:0.4rem}
.sc3c-testimonial p{margin:0 0 0.4rem; font-size:1.25rem; font-style:italic}
.sc3c-testimonial-author{font-size:1.1rem; color:var(--sc3c-muted)}

/* Payment methods */
.sc3c-payment-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem; margin-top:0.6rem}
.sc3c-payment-item{background:#fff; border-radius:8px; padding:0.6rem 0.4rem; text-align:center;
  font-size:1rem; color:var(--sc3c-bg); font-weight:700; min-height:3.6rem;
  display:flex; flex-direction:column; justify-content:center}
.sc3c-payment-item i{font-size:1.6rem; color:var(--sc3c-secondary); margin-bottom:0.2rem}

/* Winners ticker */
.sc3c-winners{background:rgba(0,0,0,0.35); border-radius:10px; padding:0.6rem 1rem;
  margin:1rem 0; overflow:hidden}
.sc3c-winner-row{display:flex; align-items:center; justify-content:space-between;
  font-size:1.15rem; padding:0.45rem 0; border-bottom:1px dashed rgba(255,255,255,0.1)}
.sc3c-winner-row:last-child{border-bottom:0}
.sc3c-winner-name{color:var(--sc3c-gold); font-weight:700}
.sc3c-winner-amount{color:var(--sc3c-accent); font-weight:700}

/* FAQ accordion */
.sc3c-faq-item{background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.05);
  border-radius:10px; margin-bottom:0.8rem; overflow:hidden}
.sc3c-faq-q{width:100%; text-align:left; background:transparent; border:0;
  color:var(--sc3c-text); font-size:1.35rem; font-weight:600; padding:1rem 1.2rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:0.8rem}
.sc3c-faq-q i{color:var(--sc3c-gold); transition:transform .2s ease}
.sc3c-faq-item.sc3c-open .sc3c-faq-q i{transform:rotate(180deg)}
.sc3c-faq-a{max-height:0; overflow:hidden; padding:0 1.2rem; color:var(--sc3c-text-soft);
  font-size:1.2rem; transition:max-height .25s ease,padding .25s ease}
.sc3c-faq-item.sc3c-open .sc3c-faq-a{max-height:400px; padding:0 1.2rem 1rem}

/* Promo banner */
.sc3c-promo-banner{background:linear-gradient(135deg,var(--sc3c-secondary),var(--sc3c-primary));
  border-radius:var(--sc3c-radius); padding:1.4rem; color:#fff; position:relative;
  overflow:hidden; margin:1.4rem 0; box-shadow:var(--sc3c-shadow)}
.sc3c-promo-banner h3{color:#fff; font-size:1.6rem; margin:0 0 0.4rem}
.sc3c-promo-banner p{color:rgba(255,255,255,0.92); margin:0 0 1rem; font-size:1.25rem}
.sc3c-promo-banner .sc3c-btn{background:#fff; color:var(--sc3c-secondary)}

/* Back to top */
#proc85-top-btn{position:fixed; right:1.2rem; bottom:calc(var(--sc3c-bottom-h) + 1rem);
  width:4rem; height:4rem; border-radius:50%; background:var(--sc3c-primary); color:#fff;
  border:0; font-size:1.8rem; cursor:pointer; z-index:900; opacity:0; visibility:hidden;
  transform:translateY(10px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  box-shadow:var(--sc3c-shadow)}
.proc85-top-visible{opacity:1 !important; visibility:visible !important; transform:translateY(0) !important}

/* Footer */
.sc3c-footer{background:var(--sc3c-bg-alt); border-top:1px solid var(--sc3c-border);
  padding:2rem 1.2rem 1rem; margin-top:2rem; color:var(--sc3c-text-soft)}
.sc3c-footer-brand{text-align:center; margin-bottom:1.4rem}
.sc3c-footer-brand img{width:4rem; height:4rem; border-radius:50%; margin:0 auto 0.6rem}
.sc3c-footer-brand p{font-size:1.2rem; color:var(--sc3c-text-soft); max-width:30rem; margin:0 auto}
.sc3c-footer-cta{display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin:1rem 0 1.4rem}
.sc3c-footer-links{display:grid; grid-template-columns:repeat(2,1fr); gap:0.6rem; margin-bottom:1rem}
.sc3c-footer-links a{color:var(--sc3c-text-soft); font-size:1.2rem}
.sc3c-footer-links a:hover{color:var(--sc3c-gold)}
.sc3c-footer-copy{border-top:1px solid rgba(255,255,255,0.08); padding-top:1rem;
  font-size:1.1rem; text-align:center; color:var(--sc3c-muted)}

/* Mobile bottom nav */
.sc3c-bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:1000;
  height:var(--sc3c-bottom-h);
  background:linear-gradient(180deg,#3a2222 0%,#1c1c1c 100%);
  border-top:1px solid var(--sc3c-border);
  display:flex; justify-content:space-around; align-items:stretch;
  padding:0.3rem 0; box-shadow:0 -6px 18px rgba(0,0,0,0.5)}
.proc85-bottom-btn{flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; color:var(--sc3c-text-soft); background:transparent; border:0;
  min-width:60px; min-height:60px; text-decoration:none; cursor:pointer; font-size:1.1rem;
  position:relative; gap:0.2rem; transition:color .2s ease,transform .2s ease}
.proc85-bottom-btn .material-icons,
.proc85-bottom-btn .fas,
.proc85-bottom-btn .ion,
.proc85-bottom-btn .bi{font-size:2.4rem}
.proc85-bottom-btn .ion{font-size:2.2rem}
.proc85-bottom-btn:hover{color:var(--sc3c-gold); transform:translateY(-2px)}
.proc85-bottom-btn::before{content:""; position:absolute; top:0; left:25%; right:25%;
  height:3px; background:transparent; border-radius:0 0 4px 4px; transition:background .2s ease}
.proc85-bottom-active{color:var(--sc3c-gold)}
.proc85-bottom-active::before{background:var(--sc3c-gold)}
.sc3c-bottom-label{font-size:1.05rem; font-weight:600; letter-spacing:0.02em}

/* Helpers & prose */
.sc3c-text-center{text-align:center}
.sc3c-mt-1{margin-top:0.6rem}
.sc3c-mt-2{margin-top:1.2rem}
.sc3c-hidden{display:none !important}
.sc3c-prose{font-size:1.25rem; line-height:1.6; color:var(--sc3c-text-soft)}
.sc3c-prose strong{color:var(--sc3c-primary); font-weight:700}
.sc3c-prose a{color:var(--sc3c-gold); font-weight:700; text-decoration:underline}
.sc3c-divider{height:1px; background:rgba(255,255,255,0.1); margin:1.4rem 0}

/* Responsive */
@media (min-width:768px){
  .sc3c-bottom-nav{display:none}
  .sc3c-wrapper{padding-bottom:3rem}
  .sc3c-container{max-width:760px}
  .sc3c-game-grid{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1024px){
  .sc3c-container{max-width:960px}
  .sc3c-game-grid{grid-template-columns:repeat(8,1fr)}
}
@media (max-width:768px){
  main,.sc3c-main,.sc3c-wrapper{padding-bottom:calc(var(--sc3c-bottom-h) + 1.5rem) !important}
}
@media (max-width:360px){
  html{font-size:55%}
  .sc3c-game-grid{grid-template-columns:repeat(2,1fr)}
}