/* =========================================================
   playtime app - core stylesheet (prefix: pg51-)
   Palette: #1B263B bg / #FFE135 accent / #FF91A4 pink
            #CD853F peru / #F5DEB3 wheat / #F0F0F0 light
   Mobile-first, max-width 430px
   ========================================================= */

:root{
  --pg51-bg:#1B263B;
  --pg51-bg-2:#23304a;
  --pg51-bg-3:#2e3d5c;
  --pg51-primary:#FFE135;
  --pg51-pink:#FF91A4;
  --pg51-peru:#CD853F;
  --pg51-wheat:#F5DEB3;
  --pg51-light:#F0F0F0;
  --pg51-text:#F0F0F0;
  --pg51-muted:#b9c2d3;
  --pg51-line:rgba(245,222,179,.14);
  --pg51-shadow:0 8px 24px rgba(0,0,0,.28);
  --pg51-radius:14px;
  --pg51-radius-sm:10px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:62.5%;}
body{
  margin:0;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,#1B263B 0%,#1b2640 55%,#23304a 100%);
  color:var(--pg51-text);
  line-height:1.5rem;
  font-size:1.5rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--pg51-primary);text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .8rem;line-height:1.25;font-weight:800;}
h1{font-size:2.2rem;}
h2{font-size:1.9rem;}
h3{font-size:1.65rem;}
h4{font-size:1.45rem;}
p{margin:0 0 1rem;color:var(--pg51-muted);}

/* ============ layout shell (430px) ============ */
.pg51-wrapper{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:linear-gradient(180deg,#1B263B 0%,#202c46 100%);
  box-shadow:0 0 40px rgba(0,0,0,.35);
}
.pg51-container{width:100%;padding:0 14px;}

/* ============ header ============ */
.pg51-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  max-width:430px;margin:0 auto;
  background:rgba(27,38,59,.96);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--pg51-primary);
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
.pg51-header-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;gap:8px;
}
.pg51-logo{display:flex;align-items:center;gap:8px;min-width:0;}
.pg51-logo-icon{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#FFE135,#FF91A4);
  display:flex;align-items:center;justify-content:center;
  color:#1B263B;font-weight:900;font-size:1.6rem;
}
.pg51-logo-text{font-size:1.5rem;font-weight:800;color:var(--pg51-wheat);white-space:nowrap;}
.pg51-logo-text span{color:var(--pg51-primary);}
.pg51-head-actions{display:flex;align-items:center;gap:6px;}
.pg51-btn{
  border:0;border-radius:30px;padding:8px 14px;
  font-size:1.25rem;font-weight:700;cursor:pointer;
  transition:transform .15s,box-shadow .15s,filter .15s;
  display:inline-flex;align-items:center;gap:5px;min-height:34px;
}
.pg51-btn:active{transform:scale(.94);}
.pg51-btn-login{background:transparent;color:var(--pg51-wheat);border:1.5px solid var(--pg51-wheat);}
.pg51-btn-register{background:linear-gradient(135deg,#FFE135,#FF91A4);color:#1B263B;box-shadow:0 4px 10px rgba(255,225,53,.35);}
.pg51-btn-block{display:flex;width:100%;justify-content:center;padding:12px;font-size:1.5rem;}
.pg51-menu-toggle{
  background:transparent;border:0;color:var(--pg51-wheat);
  font-size:2rem;cursor:pointer;padding:4px 8px;line-height:1;
}

/* ============ mobile slide menu ============ */
.pg51-menu{
  position:fixed;top:0;right:-100%;width:80%;max-width:330px;
  height:100vh;background:#1B263B;z-index:9999;
  transition:right .28s ease;padding:64px 16px 24px;overflow-y:auto;
  border-left:2px solid var(--pg51-primary);
}
.pg51-menu.open{right:0;}
.pg51-menu-close{
  position:absolute;top:12px;right:14px;background:transparent;
  border:0;color:var(--pg51-wheat);font-size:2.4rem;cursor:pointer;
}
.pg51-menu-title{color:var(--pg51-primary);font-size:1.5rem;font-weight:800;margin:0 0 12px;letter-spacing:.5px;}
.pg51-menu a{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:10px;color:var(--pg51-light);
  border-bottom:1px solid var(--pg51-line);font-size:1.4rem;
}
.pg51-menu a:hover,.pg51-menu a:active{background:var(--pg51-bg-3);color:var(--pg51-primary);}
.pg51-menu a i{color:var(--pg51-primary);width:22px;text-align:center;}
.pg51-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;
  opacity:0;visibility:hidden;transition:opacity .25s;
}
.pg51-overlay.show{opacity:1;visibility:visible;}

/* ============ main ============ */
main{padding-top:62px;padding-bottom:90px;display:block;}

/* ============ hero carousel ============ */
.pg51-hero{padding:14px 14px 6px;}
.pg51-carousel{position:relative;border-radius:var(--pg51-radius);overflow:hidden;box-shadow:var(--pg51-shadow);}
.pg51-slides{display:flex;scroll-snap-type:x mandatory;overflow-x:auto;scroll-behavior:smooth;}
.pg51-slides::-webkit-scrollbar{display:none;}
.pg51-slide{
  flex:0 0 100%;scroll-snap-align:center;position:relative;
  cursor:pointer;
}
.pg51-slide img{width:100%;height:200px;object-fit:cover;}
.pg51-slide-cap{
  position:absolute;left:12px;bottom:10px;right:12px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.pg51-slide-cap b{font-size:1.6rem;color:var(--pg51-primary);}
.pg51-slide-cap span{display:block;font-size:1.2rem;color:var(--pg51-wheat);}
.pg51-dots{display:flex;justify-content:center;gap:6px;padding:8px 0;}
.pg51-dot{width:8px;height:8px;border-radius:50%;background:rgba(245,222,179,.35);cursor:pointer;}
.pg51-dot.active{background:var(--pg51-primary);width:22px;border-radius:6px;}

/* ============ sections ============ */
.pg51-section{padding:14px;}
.pg51-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.pg51-section-head h2{color:var(--pg51-wheat);}
.pg51-section-head h2 span{color:var(--pg51-primary);}
.pg51-section-link{font-size:1.2rem;color:var(--pg51-pink);font-weight:600;}

/* ============ promo CTA bar ============ */
.pg51-cta{
  margin:6px 14px 14px;border-radius:var(--pg51-radius);padding:14px;
  background:linear-gradient(120deg,#CD853F,#FF91A4);
  color:#1B263B;box-shadow:var(--pg51-shadow);text-align:center;
}
.pg51-cta h3{color:#1B263B;font-size:1.7rem;margin-bottom:4px;}
.pg51-cta p{color:#2b1a0a;font-size:1.25rem;margin-bottom:10px;}
.pg51-cta .pg51-btn{background:#1B263B;color:var(--pg51-primary);}

/* ============ game grid ============ */
.pg51-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
.pg51-card{
  background:var(--pg51-bg-2);border-radius:var(--51-radius-sm,10px);
  border:1px solid var(--pg51-line);overflow:hidden;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  text-align:center;
}
.pg51-card:active{transform:scale(.95);}
.pg51-card:hover{border-color:var(--pg51-primary);box-shadow:0 6px 16px rgba(255,225,53,.18);}
.pg51-card-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#0f1726;}
.pg51-card-name{
  font-size:1.15rem;color:var(--pg51-wheat);font-weight:600;
  padding:6px 4px 8px;line-height:1.25;min-height:34px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pg51-card-hot{position:relative;}
.pg51-card-hot::after{
  content:"HOT";position:absolute;top:4px;left:4px;background:#FF91A4;color:#fff;
  font-size:1rem;font-weight:800;padding:2px 6px;border-radius:6px;
}

/* ============ category chips ============ */
.pg51-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;}
.pg51-chips::-webkit-scrollbar{display:none;}
.pg51-chip{
  flex:0 0 auto;padding:6px 14px;border-radius:20px;
  background:var(--pg51-bg-2);color:var(--pg51-muted);
  font-size:1.2rem;font-weight:600;border:1px solid var(--pg51-line);cursor:pointer;
}
.pg51-chip.active{background:var(--pg51-primary);color:#1B263B;border-color:var(--pg51-primary);}

/* ============ feature / info cards ============ */
.pg51-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.pg51-info-card{
  background:var(--pg51-bg-2);border:1px solid var(--pg51-line);
  border-radius:var(--pg51-radius-sm);padding:12px;text-align:center;
}
.pg51-info-card i{font-size:2.4rem;color:var(--pg51-primary);margin-bottom:6px;}
.pg51-info-card.pink i{color:var(--pg51-pink);}
.pg51-info-card.peru i{color:var(--pg51-peru);}
.pg51-info-card h4{color:var(--pg51-wheat);font-size:1.35rem;margin-bottom:4px;}
.pg51-info-card p{font-size:1.15rem;margin:0;color:var(--pg51-muted);}

/* ============ RTP table ============ */
.pg51-rtp-table{width:100%;border-collapse:collapse;font-size:1.2rem;background:var(--pg51-bg-2);border-radius:10px;overflow:hidden;}
.pg51-rtp-table th,.pg51-rtp-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--pg51-line);}
.pg51-rtp-table th{background:var(--pg51-bg-3);color:var(--pg51-primary);}
.pg51-rtp-table td{color:var(--pg51-muted);}
.pg51-rtp-table tr:last-child td{border-bottom:0;}
.pg51-rtp-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700;font-size:1.1rem;}
.pg51-rtp-high{background:rgba(80,200,120,.18);color:#7be0a0;}
.pg51-rtp-mid{background:rgba(255,225,53,.18);color:var(--pg51-primary);}
.pg51-rtp-low{background:rgba(255,145,164,.18);color:var(--pg51-pink);}

/* ============ steps ============ */
.pg51-steps{counter-reset:step;}
.pg51-step{display:flex;gap:10px;margin-bottom:12px;}
.pg51-step-num{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#FFE135,#FF91A4);
  color:#1B263B;font-weight:900;display:flex;align-items:center;justify-content:center;
}
.pg51-step-body h4{color:var(--pg51-wheat);margin-bottom:2px;}
.pg51-step-body p{margin:0;font-size:1.25rem;}

/* ============ testimonials ============ */
.pg51-testi{background:var(--pg51-bg-2);border:1px solid var(--pg51-line);border-radius:var(--pg51-radius-sm);padding:12px;margin-bottom:10px;}
.pg51-testi-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.pg51-testi-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#CD853F,#FF91A4);display:flex;align-items:center;justify-content:center;color:#1B263B;font-weight:800;}
.pg51-testi-name{color:var(--pg51-wheat);font-weight:700;font-size:1.3rem;}
.pg51-testi-stars{color:var(--pg51-primary);font-size:1.1rem;}
.pg51-testi p{margin:0;font-size:1.25rem;color:var(--pg51-muted);}

/* ============ winners ============ */
.pg51-winner{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--pg51-bg-2);border:1px solid var(--pg51-line);
  border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:1.2rem;
}
.pg51-winner b{color:var(--pg51-primary);}
.pg51-winner span{color:var(--pg51-muted);}
.pg51-winner .amt{color:#7be0a0;font-weight:800;}

/* ============ payment ============ */
.pg51-pay{display:flex;flex-wrap:wrap;gap:8px;}
.pg51-pay-item{
  flex:1 1 30%;background:var(--pg51-bg-2);border:1px solid var(--pg51-line);
  border-radius:10px;padding:10px;text-align:center;
}
.pg51-pay-item i{font-size:2rem;color:var(--pg51-primary);}
.pg51-pay-item span{display:block;font-size:1.1rem;color:var(--pg51-muted);margin-top:4px;}

/* ============ faq ============ */
.pg51-faq{border:1px solid var(--pg51-line);border-radius:10px;margin-bottom:8px;overflow:hidden;background:var(--pg51-bg-2);}
.pg51-faq-q{
  width:100%;text-align:left;background:transparent;border:0;color:var(--pg51-wheat);
  font-size:1.3rem;font-weight:700;padding:12px;display:flex;justify-content:space-between;cursor:pointer;
}
.pg51-faq-q .ico{color:var(--pg51-primary);transition:transform .2s;}
.pg51-faq.open .ico{transform:rotate(45deg);}
.pg51-faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 12px;}
.pg51-faq.open .pg51-faq-a{max-height:280px;padding:0 12px 12px;}
.pg51-faq-a p{margin:0;font-size:1.2rem;color:var(--pg51-muted);}

/* ============ seo long text ============ */
.pg51-seo{padding:14px;background:var(--pg51-bg-2);border-radius:var(--pg51-radius-sm);margin:10px 14px;border:1px solid var(--pg51-line);}
.pg51-seo h3{color:var(--pg51-primary);}
.pg51-seo p{font-size:1.25rem;line-height:1.6;}
.pg51-seo ul{padding-left:18px;margin:0 0 8px;color:var(--pg51-muted);}
.pg51-seo li{margin-bottom:4px;font-size:1.2rem;}
.pg51-seo a{color:var(--pg51-pink);font-weight:600;}

/* ============ inline promo link ============ */
.pg51-promo-link{
  color:var(--pg51-primary);font-weight:800;cursor:pointer;
  border-bottom:1.5px dashed var(--pg51-primary);
}

/* ============ footer ============ */
.pg51-footer{
  background:#15203a;border-top:2px solid var(--pg51-primary);
  padding:18px 14px 24px;margin-top:14px;
}
.pg51-footer h4{color:var(--pg51-primary);margin-bottom:8px;font-size:1.4rem;}
.pg51-footer p{font-size:1.2rem;color:var(--pg51-muted);margin-bottom:12px;}
.pg51-footer-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.pg51-footer-links a{
  flex:1 1 45%;background:var(--pg51-bg-2);border:1px solid var(--pg51-line);
  border-radius:8px;padding:8px 10px;font-size:1.15rem;color:var(--pg51-wheat);text-align:center;
}
.pg51-footer-links a:hover{color:var(--pg51-primary);border-color:var(--pg51-primary);}
.pg51-footer-promos{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.pg51-footer-promos .pg51-btn{flex:1 1 45%;justify-content:center;padding:8px;font-size:1.15rem;}
.pg51-copy{text-align:center;font-size:1.1rem;color:var(--pg51-muted);border-top:1px solid var(--pg51-line);padding-top:10px;}

/* ============ mobile bottom nav ============ */
.pg51-bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:1000;
  max-width:430px;margin:0 auto;height:62px;
  background:rgba(21,32,58,.98);
  border-top:2px solid var(--pg51-primary);
  display:flex;justify-content:space-around;align-items:center;
  box-shadow:0 -4px 14px rgba(0,0,0,.4);
}
.pg51-bottomnav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--pg51-muted);
  font-size:1rem;font-weight:600;cursor:pointer;padding:6px 2px;
  gap:2px;min-width:60px;min-height:60px;transition:color .15s,transform .15s;
}
.pg51-bottomnav-btn i,.pg51-bottomnav-btn .material-symbols-outlined{font-size:22px;}
.pg51-bottomnav-btn:active{transform:scale(.88);}
.pg51-bottomnav-btn.active{color:var(--pg51-primary);}
.pg51-bottomnav-btn.pink{color:var(--pg51-pink);}
.pg51-bottomnav-btn.promo{
  background:linear-gradient(135deg,#FFE135,#FF91A4);
  color:#1B263B;border-radius:30px;height:48px;margin:0 4px;
}
.pg51-bottomnav-btn.promo i{color:#1B263B;font-size:22px;}
.pg51-bottomnav-badge{
  position:absolute;top:2px;right:18px;background:#FF91A4;color:#fff;
  font-size:.9rem;font-weight:800;border-radius:10px;padding:0 5px;min-width:16px;text-align:center;
}

/* ============ desktop hide bottom nav ============ */
@media (min-width:769px){
  .pg51-bottomnav{display:none;}
  main{padding-bottom:30px;}
}

/* utilities */
.pg51-hidden{display:none !important;}
.pg51-text-center{text-align:center;}
.pg51-mt-8{margin-top:8px;}
.pg51-mt-14{margin-top:14px;}
.pg51-divider{height:1px;background:var(--pg51-line);margin:14px 0;}