
:root{
  --bg:#050812;
  --panel:#0b1220;
  --deep:#06131a;
  --green:#00c853;
  --green2:#009b43;
  --gold:#ffd23f;
  --orange:#ff8a00;
  --red:#ef233c;
  --blue:#12d8ff;
  --text:#ffffff;
  --muted:#b8c4d6;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#050812;
  line-height:1.35;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.site{
  width:min(100%,430px);
  min-height:100vh;
  margin:0 auto;
  background:linear-gradient(180deg,#07101c 0,#050812 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 50px rgba(0,0,0,.45);
  overflow:hidden;
}
.top{
  position:sticky;
  top:0;
  z-index:100;
  background:#008f28;
  border-bottom:3px solid #ffd23f;
}
.brandbar{
  height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
}
.brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand img{
  width:34px!important;
  height:34px!important;
  flex:0 0 34px!important;
  border-radius:9px;
  background:#fff;
  border:1px solid rgba(255,255,255,.6);
}
.brand strong{
  font-size:18px;
  line-height:1.05;
  font-weight:1000;
  letter-spacing:-.4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.menu{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  font-size:23px;
  color:#fff;
}
.nav{
  display:flex;
  align-items:center;
  gap:0;
  height:38px;
  overflow-x:auto;
  scrollbar-width:none;
  background:#050812;
  border-top:1px solid rgba(255,255,255,.08);
}
.nav a{
  flex:0 0 auto;
  padding:10px 13px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  border-right:1px solid rgba(255,255,255,.18);
}
.nav a.active{
  color:#07101c;
  background:#ffd23f;
  border-radius:0 0 12px 0;
}

/* Home */
.home-hero{padding:12px 10px 6px}
.home-card{
  border-radius:24px;
  padding:18px 15px;
  background:
    radial-gradient(circle at 78% 10%,rgba(255,210,63,.24),transparent 28%),
    linear-gradient(135deg,#07152a 0,#0b5c37 45%,#1a0b2d 100%);
  border:2px solid rgba(255,210,63,.45);
  box-shadow:0 18px 42px rgba(0,0,0,.36);
}
.home-card .tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#ffd23f;
  color:#111827;
  font-size:12px;
  font-weight:1000;
}
.home-card h1{
  margin:10px 0 8px;
  font-size:36px;
  line-height:.96;
  letter-spacing:-1.5px;
  font-weight:1000;
  text-shadow:0 4px 0 rgba(0,0,0,.25);
}
.home-card p{
  margin:0 0 12px;
  color:#e8f2ff;
  font-size:15px;
}
.home-btn{
  display:inline-flex;
  padding:12px 16px;
  border-radius:14px;
  color:#111827;
  font-weight:1000;
  background:linear-gradient(180deg,#ffd23f,#ff8a00);
}
.featured{
  padding:8px 10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.fcard{
  text-align:center;
  border-radius:18px;
  padding:9px 6px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.12);
}
.fcard img{
  width:58px!important;
  height:58px!important;
  margin:0 auto;
  border-radius:16px;
  background:#fff;
  border:2px solid #ffd23f;
}
.fcard b{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.1;
}
.fcard span{
  display:block;
  color:#ffd23f;
  font-size:11px;
  font-weight:1000;
}

/* App hero - premium but stable */
.hero{padding:10px}
.poster{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(circle at 82% 16%,rgba(255,210,63,.32),transparent 25%),
    radial-gradient(circle at 12% 85%,rgba(18,216,255,.15),transparent 28%),
    linear-gradient(150deg,#1b1234 0,#7f1133 50%,#062d25 100%);
  border:2px solid rgba(255,210,63,.55);
  box-shadow:0 22px 48px rgba(0,0,0,.48);
}
.poster-top{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.08));
  border-bottom:1px solid rgba(255,255,255,.16);
}
.mini{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
}
.mini img{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  border-radius:16px;
  background:#fff;
  border:2px solid #ffd23f;
  object-fit:cover!important;
}
.mini h1{
  margin:0!important;
  max-width:215px;
  color:#fff!important;
  font-size:20px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini small{
  display:block;
  margin-top:2px;
  color:#ffe39a;
  font-size:12px;
  font-weight:900;
}
.top-download{
  flex:0 0 auto;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(180deg,#23f985,#00a84d);
  color:#fff;
  font-size:14px;
  font-weight:1000;
  box-shadow:0 10px 22px rgba(0,200,83,.28);
}
.poster-main{
  position:relative;
  min-height:430px;
  padding:22px 12px 20px;
  text-align:center;
}
.hot-label{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,210,63,.45);
  color:#ffe39a;
  font-size:12px;
  font-weight:1000;
}
.big-title{
  margin:18px 0 14px;
  font-size:40px;
  line-height:.92;
  font-weight:1000;
  letter-spacing:-1.6px;
  text-shadow:0 5px 0 rgba(0,0,0,.28),0 16px 30px rgba(0,0,0,.42);
}
.cards{
  position:relative;
  width:176px;
  height:105px;
  margin:0 auto 12px;
}
.play-card{
  position:absolute;
  width:78px;
  height:102px;
  border-radius:14px;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:40px;
  font-weight:1000;
  box-shadow:0 12px 26px rgba(0,0,0,.35);
}
.play-card:nth-child(1){left:5px;top:5px;transform:rotate(-14deg);color:#ef233c}
.play-card:nth-child(2){left:49px;top:0;transform:rotate(1deg);color:#111827}
.play-card:nth-child(3){left:93px;top:6px;transform:rotate(14deg);color:#ef233c}
.bonus-box{
  width:100%;
  max-width:350px;
  margin:0 auto 16px;
  padding:13px 8px;
  border-radius:22px;
  background:linear-gradient(180deg,#4017d8,#16084d);
  border:4px solid #ffd23f;
  box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 28px rgba(255,210,63,.34);
  color:#ffef83;
  font-size:19px;
  font-weight:1000;
}
.bonus-box b{
  color:#fff;
  font-size:34px;
  letter-spacing:-1px;
  text-shadow:0 3px 0 rgba(0,0,0,.28);
}
.download-big{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:320px;
  height:60px;
  margin:0 auto;
  border-radius:999px;
  color:#fff;
  font-size:22px;
  font-weight:1000;
  background:linear-gradient(180deg,#ffe76d 0,#ff8a00 50%,#ef233c 100%);
  border:4px solid rgba(255,255,255,.75);
  box-shadow:0 14px 30px rgba(0,0,0,.38),0 0 25px rgba(239,35,60,.26);
}
.trust{
  width:100%;
  max-width:350px;
  margin:17px auto 0;
  padding:12px;
  border-radius:18px;
  text-align:left;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.14);
}
.trust b{
  display:block;
  margin:6px 0;
  color:#fff;
  font-size:14px;
}
.coin{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:50%;
  background:radial-gradient(circle,#fff8b1 0 20%,#ffd23f 21% 62%,#b45309 63%);
  box-shadow:0 0 20px rgba(255,210,63,.7);
}
.c1{left:8%;top:28%}
.c2{right:8%;top:43%}
.c3{left:13%;bottom:16%}
.c4{right:14%;bottom:18%}

/* single-line marquee */
.yellow-marquee{
  height:48px;
  line-height:44px;
  margin:0 10px 8px;
  border-radius:14px;
  overflow:hidden;
  white-space:nowrap;
  color:#190700;
  font-size:15px;
  font-weight:1000;
  background:linear-gradient(90deg,#ffe76d,#ffb000,#ff4a3d);
  border:2px dashed rgba(255,255,255,.74);
  box-shadow:0 10px 24px rgba(255,138,0,.24);
}
.yellow-marquee span{
  display:inline-block;
  padding-left:100%;
  animation:marquee 25s linear infinite;
}
@keyframes marquee{to{transform:translateX(-100%)}}

/* robust trending list */
.section-title{
  margin:10px;
  padding:10px;
  border-radius:14px;
  text-align:center;
  font-size:22px;
  font-weight:1000;
  background:linear-gradient(90deg,#008f28,#065f46);
  border:2px solid rgba(255,210,63,.6);
  color:#fff;
}
.app-list{
  padding:0 10px 10px;
}
.app-row{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:76px!important;
  padding:9px 0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.app-row .rank{
  width:24px!important;
  flex:0 0 24px!important;
  text-align:center!important;
  color:#8b95a8!important;
  font-size:21px!important;
  font-weight:1000!important;
}
.app-row > a:first-of-type{
  width:54px!important;
  height:54px!important;
  flex:0 0 54px!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:15px!important;
}
.app-row > a:first-of-type img,
.app-row img{
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  min-width:54px!important;
  object-fit:cover!important;
  border-radius:15px!important;
  background:#fff!important;
  border:2px solid #ffd23f!important;
}
.app-row > div:not(.rank){
  min-width:0!important;
  flex:1 1 auto!important;
}
.app-name{
  display:block!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.12!important;
  font-weight:1000!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.app-meta{
  margin-top:3px!important;
  color:#b8c4d6!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.app-meta b{color:#63ff9d!important}
.small-download{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:70px!important;
  height:38px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  background:linear-gradient(180deg,#ef233c,#b90e24)!important;
}

/* simple pages */
.page{padding:18px 16px}
.page h1{font-size:32px;margin:0 0 12px}
.box{padding:14px;border-radius:16px;background:#0b1220;border:1px solid rgba(255,255,255,.12)}
.page p{color:#d8dfef;font-size:16px}
.footer{
  padding:16px 10px 20px;
  background:#030711;
  border-top:1px solid rgba(255,255,255,.10);
  text-align:center;
}
.foot-links{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}
.foot-links a{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:#e5e7eb;
  font-size:13px;
  font-weight:900;
}
.note,.copy{
  margin:10px auto 0;
  max-width:360px;
  color:#8994a9;
  font-size:12px;
}
@media(max-width:360px){
  .brand strong{font-size:16px}
  .nav a{font-size:12px;padding:9px 10px}
  .mini h1{max-width:145px;font-size:18px!important}
  .top-download{font-size:13px;padding:9px 9px}
  .big-title{font-size:35px}
  .poster-main{min-height:420px}
  .bonus-box b{font-size:30px}
  .small-download{min-width:62px!important;font-size:12px!important}
}
