:root{
  --bg:#070101;
  --maroon:#210404;
  --maroon2:#43070a;
  --card:#100303;
  --gold:#ffd56d;
  --gold2:#bd741f;
  --gold3:#ffe99e;
  --red:#e71924;
  --green:#31e875;
  --text:#fff8e8;
  --muted:#d7ba84;
  --line:#87501e;
  --telegram:#28a8ea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% -12rem,#7e0d14 0,#260404 32rem,#070101 70rem),
    linear-gradient(135deg,#040000 0%,#220404 50%,#0a0101 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.page-bg{position:fixed;inset:0;z-index:-2;background:linear-gradient(135deg,#000 0%,#270303 50%,#080101 100%)}
.page-bg:before,.page-bg:after{content:"";position:absolute;border-radius:999px;filter:blur(58px);opacity:.32;pointer-events:none}
.page-bg:before{width:30rem;height:30rem;background:#d91124;top:5rem;left:-9rem}
.page-bg:after{width:38rem;height:38rem;background:#d39228;right:-13rem;top:23rem}
.page-shell{width:min(1320px,calc(100% - 30px));margin:20px auto 58px}

.main-btn,.ghost-btn,.refresh-btn{
  display:inline-flex;justify-content:center;align-items:center;border-radius:999px;font-weight:900;letter-spacing:.2px;min-height:42px;padding:0 18px;font-size:13px;border:0;cursor:pointer;
}
.main-btn{background:linear-gradient(180deg,#fff4b7 0%,#ffd86d 42%,#bd741f 100%);color:#250900;box-shadow:0 10px 30px #d78f304a,inset 0 1px 0 #fff8}
.ghost-btn{border:1px solid #b77a2b;background:#250707;color:#ffdda0;box-shadow:inset 0 0 12px #0008}
.refresh-btn{background:#1c0606;color:#ffe3a8;border:1px solid #895223;min-width:98px}
.big{min-height:48px;padding:0 30px;font-size:14px}

.hero{position:relative;overflow:hidden;text-align:center;border-radius:30px;padding:46px 24px 36px;background:linear-gradient(140deg,#200505 0%,#57080d 52%,#120303 100%);border:1px solid #956125;box-shadow:0 25px 70px #000a,inset 0 1px 0 #ffffff20}
.hero-bg-ring{position:absolute;inset:-14rem auto auto 50%;transform:translateX(-50%);width:46rem;height:46rem;border-radius:50%;background:radial-gradient(circle,#ffd56d2c 0,#ffd56d18 24%,transparent 60%);pointer-events:none}
.hero>*:not(.hero-bg-ring){position:relative}
.hero-topline{display:inline-flex;border:1px solid #bd822f;background:#ffd56d1d;color:#ffe5a5;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:900;letter-spacing:1.4px}
h1{margin:14px 0 8px;font-size:clamp(40px,7.2vw,88px);line-height:.9;letter-spacing:-3px;color:var(--gold);text-shadow:0 5px 0 #7c2600,0 0 18px #ffbf4585,0 18px 38px #000}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}


.stats-row{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;margin:16px 0;max-width:760px;margin-left:auto;margin-right:auto}
.stat-card{border-radius:18px;background:linear-gradient(180deg,#190505,#0d0202);border:1px solid #7d4a1f;padding:14px;text-align:center;box-shadow:0 14px 35px #0007}
.stat-card b{display:block;color:#fff;font-size:24px;margin-bottom:3px}.stat-card span{color:var(--muted);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.7px}

.control-panel{display:grid;grid-template-columns:1fr 178px 106px;gap:10px;margin:16px 0 12px}
.search-box{display:flex;align-items:center;gap:10px;min-height:48px;background:#120303;border:1px solid #7d4a1f;border-radius:16px;padding:0 15px;box-shadow:inset 0 0 14px #0008}
.search-box input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font-size:15px}.search-box input::placeholder{color:#9e8061}
select{min-height:48px;border-radius:16px;background:#120303;border:1px solid #7d4a1f;color:var(--text);padding:0 14px;font-weight:900;outline:0}

/* V8: provider kembali jadi slider 1 baris, bukan wrap */
.provider-slider{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;align-items:center;margin:0 0 14px;position:relative}
.provider-tabs{display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:2px 0 8px;align-items:center;overscroll-behavior-inline:contain}
.provider-tabs::-webkit-scrollbar{height:0}.provider-tabs{scrollbar-width:none}
.slide-nav{width:42px;height:38px;border-radius:999px;border:1px solid #895223;background:linear-gradient(180deg,#260707,#100202);color:#ffe1a2;font-size:28px;line-height:1;cursor:pointer;font-weight:900;box-shadow:0 8px 20px #0007,inset 0 0 12px #0008}
.slide-nav:hover{background:linear-gradient(180deg,#fff1a6,#ffc955 50%,#b96a20);color:#250900;border-color:#ffdf8a}
.tab{flex:0 0 auto;border-radius:999px;border:1px solid #75451d;background:linear-gradient(180deg,#210606,#130303);color:#f7dab0;min-height:36px;padding:0 14px;font-weight:900;font-size:12px;cursor:pointer;box-shadow:inset 0 -10px 18px #0004;white-space:nowrap}
.tab.active{background:linear-gradient(180deg,#fff1a6,#ffc955 50%,#b96a20);color:#240800;border-color:#ffdf8a;box-shadow:0 0 22px #ffbf414a}

.game-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:start}
.game-card{background:#0e0303;border:1px solid #74451e;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px #0008, inset 0 0 0 1px #000;transition:transform .16s,border-color .16s,box-shadow .16s}
.game-card:hover{transform:translateY(-4px);border-color:#ffd56d;box-shadow:0 22px 46px #000b,0 0 22px #ffbf3038}

/* V8: gambar dibuat jelas, tidak kepotong */
.thumb-wrap{position:relative;aspect-ratio:1/1.02;background:#070101;overflow:hidden;border-bottom:1px solid #3b1309}
.game-thumb{width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:radial-gradient(circle at center,#321010 0,#060101 72%);filter:saturate(1.12) contrast(1.04);padding:3px}
.provider-pill,.rank-pill{position:absolute;border-radius:999px;font-weight:900;font-size:9.5px;white-space:nowrap;max-width:calc(100% - 14px);overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;z-index:3}
.provider-pill{left:7px;top:7px;padding:5px 8px;color:#ffe4a6;background:#100202e8;border:1px solid #c88b34;box-shadow:0 3px 8px #0008}
.rank-pill{right:7px;bottom:7px;padding:5px 7px;color:#260900;background:#ffdf76;box-shadow:0 3px 8px #0007}
.thumb-bottom{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 8px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.92) 100%);z-index:2;transform:translateY(0)}
.game-name{margin:0 0 6px;line-height:1.2;font-size:12px;min-height:28px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff7e6;text-shadow:0 2px 4px #000;font-weight:900}
.thumb-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;transform:translateY(8px);transition:.18s ease}
.game-card:hover .thumb-actions{opacity:1;transform:translateY(0)}
.play-btn,.demo-btn{height:30px;display:grid;place-items:center;border-radius:999px;font-size:10px;font-weight:900}
.play-btn{background:linear-gradient(180deg,#fff4b7,#ffc955 52%,#b96a20);color:#250900;box-shadow:0 7px 16px #0008}
.demo-btn{background:#270808;border:1px solid #986028;color:#ffe1a5}

.rtp-panel{padding:6px 10px 7px;background:#0a0202}
.progress{height:30px;border-radius:8px;background:#e9eef4;overflow:hidden;position:relative;border:0;box-shadow:inset 0 0 0 1px #dfe5ea}
.progress-bar{display:block;height:100%;width:0;border-radius:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 5px,transparent 5px 10px),linear-gradient(90deg,#f02b2b 0%,#ffb737 48%,#2ac861 100%)}
.rtp-value{position:absolute;inset:0;display:grid;place-items:center;color:#140500;text-shadow:0 1px 0 #fff8;font-size:13px;font-weight:900;z-index:2}

.jam-panel{background:linear-gradient(180deg,#3a3a3a,#2d2d2d);padding:12px 9px 10px;text-align:center;border-top:1px solid #ffffff18;border-bottom:1px solid #000}
.jam-title{font-size:20px;font-weight:900;color:#fff;letter-spacing:.4px;text-shadow:0 2px 0 #000;margin-bottom:8px}
.meta-row{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
.hot-time{font-size:16px;color:#fff;font-weight:900;text-shadow:0 2px 0 #000}.hot-time::before{content:""}
.status-pill{font-size:9.5px;font-weight:900;border-radius:999px;padding:4px 7px;color:#260900;background:#ffd76f;box-shadow:0 2px 0 #0005}

.pattern-list{background:#fff;color:#000;padding:7px 10px 8px;min-height:74px;display:grid;gap:3px;border-bottom:1px solid #0001}
.pattern-row{display:flex;justify-content:center;align-items:center;gap:8px;font-size:12px;line-height:1.15;font-weight:800;white-space:nowrap}.pattern-row b{min-width:70px;text-align:right}.pattern-row span{font-size:13px;letter-spacing:1px}
.empty{grid-column:1/-1;border:1px solid #70451f;border-radius:18px;background:#140404;padding:18px;text-align:center;color:#f3d3a2}

.telegram-float{position:fixed;right:20px;bottom:24px;z-index:50;display:flex;align-items:center;gap:8px;min-height:50px;padding:0 16px 0 12px;border-radius:999px;background:linear-gradient(180deg,#41c9ff,#168bd3);color:#fff;font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.4px;box-shadow:0 12px 32px #000b,0 0 28px #28a8ea66;animation:telegramFloat 2.6s infinite ease-in-out}
.telegram-icon{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#168bd3;font-size:18px;box-shadow:inset 0 -2px 0 #0002;transform:translateX(-1px)}
.telegram-pulse{position:absolute;inset:-5px;border-radius:999px;border:2px solid #41c9ff;animation:telegramPulse 1.6s infinite ease-out;pointer-events:none}
@keyframes telegramPulse{0%{opacity:.85;transform:scale(.95)}100%{opacity:0;transform:scale(1.22)}}
@keyframes telegramFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media(max-width:1220px){.game-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.page-shell{width:min(1160px,calc(100% - 24px))}.pattern-row{font-size:11px}.jam-title{font-size:18px}.hot-time{font-size:14px}}
@media(max-width:980px){.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stats-row{grid-template-columns:repeat(2,1fr)}.control-panel{grid-template-columns:1fr 160px 100px}}
@media(max-width:760px){.control-panel{grid-template-columns:1fr}.search-box,select,.refresh-btn{width:100%}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hero{padding:46px 14px 34px}.main-btn,.ghost-btn{min-width:122px}.tab{font-size:11px;min-height:34px;padding:0 11px}.provider-slider{grid-template-columns:36px 1fr 36px}.slide-nav{width:36px;height:34px;font-size:24px}.cs-float{right:10px;bottom:12px;width:150px}}
@media(max-width:540px){.page-shell{width:min(100% - 18px,1320px);margin-top:12px}.stats-row{grid-template-columns:1fr 1fr}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.big{width:100%;padding:0 14px}h1{letter-spacing:-1.5px}.jam-title{font-size:16px}.hot-time{font-size:13px}.pattern-list{padding:6px 6px}.pattern-row{font-size:10.5px;gap:5px}.pattern-row b{min-width:58px}.pattern-row span{font-size:11px}.thumb-actions{opacity:1;transform:none}.game-name{font-size:11px}}
@media(max-width:350px){.game-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr}.hero-actions{grid-template-columns:1fr}.cs-float{width:125px}}

/* V10: CS floating tanpa border hijau */
.cs-float{
  position:fixed;right:16px;bottom:18px;z-index:80;display:block;width:min(260px,26vw);
  background:transparent;border:0;box-shadow:none;padding:0;animation:csFloat 2.8s infinite ease-in-out;
}
.cs-float img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.72)) drop-shadow(0 0 18px rgba(255,194,64,.18));}
.cs-float:hover{transform:translateY(-4px) scale(1.02)}
@keyframes csFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.compact-stats{grid-template-columns:repeat(2,minmax(220px,1fr));}
@media(max-width:540px){.compact-stats{grid-template-columns:1fr 1fr}.cs-float{width:138px}}


/* V11: revisi kecil sesuai request user */
/* Statistik dibuat kiri-kanan, bukan atas-bawah */
.stats-row.compact-stats,
.compact-stats{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  max-width:none !important;
  width:100% !important;
  margin:16px 0 !important;
}
.stats-row.compact-stats .stat-card,
.compact-stats .stat-card{
  min-width:0;
  padding:16px 14px;
}

/* Hapus angka ranking #01, #02, dst di gambar game */
.rank-pill{display:none !important;}

/* Label baru: GACOR / GACOR HABIS */
.status-pill{
  min-width:74px;
  background:linear-gradient(180deg,#fff3a8,#ffd45b 52%,#d89422) !important;
  color:#210600 !important;
  border:1px solid rgba(255,239,162,.85);
  box-shadow:0 2px 0 #0006,0 0 12px rgba(255,205,68,.24) !important;
}

@media(max-width:420px){
  .stats-row.compact-stats,
  .compact-stats{grid-template-columns:1fr 1fr !important;gap:8px !important;}
  .stat-card b{font-size:18px;}
  .stat-card span{font-size:10px;}
}

/* V12: provider slide button dengan logo-style + button LOGIN/DAFTAR lebih premium */
.provider-slider{
  grid-template-columns:46px 1fr 46px;
  gap:10px;
  padding:4px 0 2px;
}
.provider-tabs{
  gap:12px;
  padding:4px 2px 10px;
}
.provider-logo-tab,
.tab.provider-logo-tab{
  min-height:46px;
  padding:0 16px 0 10px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  border:1px solid rgba(178,111,36,.95);
  background:linear-gradient(180deg,#210606 0%,#110303 100%);
  color:#f8d7a7;
  box-shadow:inset 0 -10px 20px rgba(0,0,0,.38),0 8px 18px rgba(0,0,0,.22);
  transition:.18s ease;
}
.provider-logo-tab:hover{
  transform:translateY(-1px);
  border-color:#ffd56d;
  box-shadow:0 0 18px rgba(255,198,75,.2), inset 0 -10px 20px rgba(0,0,0,.25);
}
.provider-logo-tab.active{
  background:linear-gradient(180deg,#fff5b7 0%,#ffd45b 48%,#b76b1d 100%);
  color:#240800;
  border-color:#ffec9e;
  box-shadow:0 0 24px rgba(255,197,69,.45),0 10px 20px rgba(0,0,0,.34);
}
.provider-logo-mark{
  flex:0 0 auto;
  width:34px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.3px;
  color:#fff7dc;
  border:1px solid rgba(255,224,130,.5);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(145deg,#bf1f21 0%,#6a0b10 52%,#180202 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px rgba(0,0,0,.45);
  text-shadow:0 1px 1px #000;
}
.provider-logo-tab.active .provider-logo-mark{
  color:#2a0900;
  border-color:rgba(90,43,0,.22);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.85),transparent 32%),
    linear-gradient(145deg,#fff4ad 0%,#ffc238 48%,#b8691b 100%);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.provider-label{
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  font-weight:1000;
}
.slide-nav{
  width:46px;
  height:44px;
  border-width:1px;
}

/* variasi warna logo-style provider biar tidak monoton */
.provider-logo-tab[data-provider="pgsoft"] .provider-logo-mark{background:linear-gradient(145deg,#1e7ce8,#1840a3 55%,#081126)}
.provider-logo-tab[data-provider="cq9"] .provider-logo-mark{background:linear-gradient(145deg,#ffb227,#ba5e05 55%,#260d00)}
.provider-logo-tab[data-provider="micro-gaming"] .provider-logo-mark{background:linear-gradient(145deg,#20d17c,#047842 55%,#021c11)}
.provider-logo-tab[data-provider="jili"] .provider-logo-mark{background:linear-gradient(145deg,#f1c44c,#b17a15 55%,#2a1600)}
.provider-logo-tab[data-provider="playtech"] .provider-logo-mark{background:linear-gradient(145deg,#e8edf5,#8c96a8 55%,#1a1d23);color:#171717;text-shadow:none}
.provider-logo-tab[data-provider="habanero"] .provider-logo-mark{background:linear-gradient(145deg,#ff7b26,#d73a12 55%,#310500)}
.provider-logo-tab[data-provider="nolimitcity"] .provider-logo-mark{background:linear-gradient(145deg,#e9ebef,#a2a7b0 55%,#181b22);color:#141414;text-shadow:none}
.provider-logo-tab[data-provider="redtiger"] .provider-logo-mark{background:linear-gradient(145deg,#ff2f30,#9a0508 55%,#190000)}
.provider-logo-tab[data-provider="netent"] .provider-logo-mark{background:linear-gradient(145deg,#ffffff,#cfcfcf 55%,#363636);color:#111;text-shadow:none}
.provider-logo-tab[data-provider="bgaming"] .provider-logo-mark{background:linear-gradient(145deg,#ffe64f,#f5a100 55%,#231300);color:#171000;text-shadow:none}
.provider-logo-tab[data-provider="ka-gaming"] .provider-logo-mark{background:linear-gradient(145deg,#ff4141,#bc1515 55%,#1f0000)}
.provider-logo-tab[data-provider="btg"] .provider-logo-mark{background:linear-gradient(145deg,#f8f8f8,#aeb5bd 55%,#1b2028);color:#111;text-shadow:none}

/* Button hero dibuat lebih jelas seperti tombol premium */
.hero-actions{
  gap:14px;
  align-items:center;
}
.hero .main-btn.big,
.hero .ghost-btn.big{
  position:relative;
  min-width:138px;
  min-height:54px;
  padding:0 30px;
  border-radius:999px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(255,222,128,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  transform:translateZ(0);
}
.hero .main-btn.big::before,
.hero .ghost-btn.big::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -4px 8px rgba(80,24,0,.28);
  z-index:-1;
}
.hero .main-btn.big::after,
.hero .ghost-btn.big::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-70%;width:46%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:btnShine 3.2s infinite ease-in-out;
}
.hero .main-btn.big{
  background:linear-gradient(180deg,#fff7c6 0%,#ffd763 42%,#eaa83b 68%,#a45b16 100%);
  color:#1d0700;
  box-shadow:0 13px 28px rgba(222,144,40,.34),0 0 0 4px rgba(255,198,75,.08);
}
.hero .ghost-btn.big{
  background:linear-gradient(180deg,#3a0a0a 0%,#180303 100%);
  color:#ffe1a1;
  box-shadow:0 13px 28px rgba(0,0,0,.35),0 0 0 4px rgba(255,198,75,.06);
}
.hero .main-btn.big:hover,
.hero .ghost-btn.big:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
@keyframes btnShine{0%,58%{left:-70%;opacity:0}68%{opacity:1}100%{left:130%;opacity:0}}

@media(max-width:760px){
  .provider-logo-tab,.tab.provider-logo-tab{min-height:42px;padding:0 13px 0 8px;gap:8px}
  .provider-logo-mark{width:30px;height:25px;font-size:9px;border-radius:9px}
  .provider-label{font-size:11px}
  .hero .main-btn.big,.hero .ghost-btn.big{min-width:120px;min-height:48px}
}

/* V13: Mobile button alignment + premium animated RTP percentage bar */
/* Card button dibuat konsisten di mobile dan desktop */
.thumb-bottom{
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.94) 100%) !important;
}
.thumb-actions{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.play-btn,.demo-btn{
  position:relative;
  overflow:hidden;
  min-width:0;
  letter-spacing:.1px;
  text-align:center;
  isolation:isolate;
}
.play-btn::after,.demo-btn::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-75%;
  width:44%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);
  animation:cardBtnShine 3.4s infinite ease-in-out;
  pointer-events:none;
}
.demo-btn::after{animation-delay:.55s}
@keyframes cardBtnShine{0%,62%{left:-75%;opacity:0}70%{opacity:1}100%{left:135%;opacity:0}}

/* Percentage bar efek lebih hidup */
.progress{
  height:31px;
  border-radius:9px;
  background:linear-gradient(180deg,#f3f7fb,#dfe6ec) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), inset 0 -5px 10px rgba(0,0,0,.12), 0 5px 12px rgba(0,0,0,.28) !important;
}
.progress-bar{
  position:relative;
  overflow:hidden;
  border-radius:8px 0 0 8px !important;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 7px,rgba(255,255,255,.02) 7px 14px),
    linear-gradient(90deg,#ff2d24 0%,#ffb321 42%,#27d65f 100%) !important;
  background-size:32px 32px,100% 100%;
  animation:rtpStripeMove 1.25s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -4px 7px rgba(0,0,0,.18), 0 0 14px rgba(38,220,92,.32);
}
.progress-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 48%,transparent 100%);
  transform:translateX(-120%);
  animation:rtpLightSweep 2.15s infinite ease-in-out;
}
.rtp-value{
  color:#170500 !important;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.2px;
  text-shadow:0 1px 0 rgba(255,255,255,.78),0 0 8px rgba(255,255,255,.45) !important;
}
@keyframes rtpStripeMove{to{background-position:32px 0,0 0}}
@keyframes rtpLightSweep{0%,45%{transform:translateX(-125%);opacity:0}58%{opacity:1}100%{transform:translateX(125%);opacity:0}}

@media(max-width:760px){
  .thumb-bottom{
    padding:20px 7px 7px !important;
  }
  .thumb-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    opacity:1 !important;
    transform:none !important;
  }
  .play-btn,.demo-btn{
    height:29px !important;
    border-radius:999px !important;
    font-size:9.5px !important;
    line-height:1 !important;
    padding:0 6px !important;
  }
  .play-btn{
    background:linear-gradient(180deg,#fff6c7 0%,#ffd35e 52%,#ba6d1d 100%) !important;
    color:#1f0700 !important;
    border:1px solid rgba(255,235,160,.72) !important;
    box-shadow:0 7px 15px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.72) !important;
  }
  .demo-btn{
    background:linear-gradient(180deg,#3c0b0c,#170303) !important;
    color:#ffe1a5 !important;
    border:1px solid #ad6e27 !important;
    box-shadow:0 7px 15px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  .progress{height:29px !important;border-radius:8px !important;}
  .rtp-value{font-size:12px !important;}
}

@media(max-width:420px){
  .game-grid{gap:9px !important;}
  .thumb-bottom{padding:18px 6px 6px !important;}
  .game-name{font-size:10.5px !important;min-height:26px !important;margin-bottom:5px !important;}
  .thumb-actions{gap:5px !important;}
  .play-btn,.demo-btn{height:28px !important;font-size:9px !important;padding:0 4px !important;}
  .rtp-panel{padding:5px 7px 6px !important;}
}


/* V14: hapus tombol sort/refresh + samakan tombol card mobile dengan desktop */
.control-panel.search-only,
.control-panel{
  grid-template-columns:1fr !important;
  max-width:none !important;
}
.control-panel select,
.control-panel .refresh-btn,
#sortSelect,
#refreshBtn{
  display:none !important;
}
.search-box{
  width:100% !important;
}

/* Area tombol card tidak boleh punya kotak merah/background tambahan */
.thumb-bottom{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,.93) 100%) !important;
  background-color:transparent !important;
}
.thumb-actions,
.game-card .thumb-actions,
.thumb-bottom .thumb-actions{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
}
.play-btn,.demo-btn{
  height:30px !important;
  min-height:30px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:1000 !important;
  letter-spacing:.15px !important;
  padding:0 8px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.play-btn{
  background:linear-gradient(180deg,#fff7c8 0%,#ffd965 44%,#e9a138 68%,#a65d16 100%) !important;
  color:#1c0600 !important;
  border:1px solid rgba(255,236,158,.78) !important;
  box-shadow:0 7px 15px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -3px 6px rgba(103,34,0,.22) !important;
}
.demo-btn{
  background:linear-gradient(180deg,#3a0a0b 0%,#210505 46%,#120202 100%) !important;
  color:#ffe4aa !important;
  border:1px solid #b4772b !important;
  box-shadow:0 7px 15px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
@media(max-width:760px){
  .control-panel{grid-template-columns:1fr !important;gap:0 !important;}
  .search-box{min-height:48px !important;border-radius:16px !important;}
  .thumb-actions{grid-template-columns:1fr 1fr !important;gap:6px !important;opacity:1 !important;transform:none !important;}
  .play-btn,.demo-btn{height:29px !important;min-height:29px !important;font-size:9.5px !important;padding:0 7px !important;}
}
@media(max-width:420px){
  .play-btn,.demo-btn{height:28px !important;min-height:28px !important;font-size:9px !important;padding:0 5px !important;}
}


/* V15: hapus tombol LOGIN/DAFTAR di setiap game card */
.thumb-actions,
.game-card .thumb-actions,
.thumb-bottom .thumb-actions,
.play-btn,
.demo-btn{
  display:none !important;
}
.thumb-bottom{
  padding:26px 8px 8px !important;
}
.game-name{
  margin-bottom:0 !important;
}

/* V15: RTP percentage bar hijau + efek bergerak */
.progress{
  height:30px !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#071f10 0%,#031007 100%) !important;
  border:1px solid rgba(134,255,169,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 14px rgba(39,255,107,.28),
    0 0 14px rgba(19,224,86,.18) !important;
}
.progress-bar{
  position:relative !important;
  overflow:hidden !important;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 7px,rgba(255,255,255,.02) 7px 14px),
    linear-gradient(90deg,#039d39 0%,#17d65b 42%,#70ff85 72%,#21b24b 100%) !important;
  background-size:28px 28px,100% 100% !important;
  animation:mk99GreenBarMove 1.05s linear infinite !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -7px 14px rgba(0,77,27,.38),
    0 0 16px rgba(39,255,107,.40) !important;
}
.progress-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.55) 48%,transparent 100%);
  width:45%;
  transform:translateX(-130%) skewX(-18deg);
  animation:mk99GreenSweep 2.15s ease-in-out infinite !important;
}
.rtp-value{
  color:#031507 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 0 8px rgba(255,255,255,.30) !important;
}
@keyframes mk99GreenBarMove{
  from{background-position:0 0,0 0}
  to{background-position:28px 0,0 0}
}
@keyframes mk99GreenSweep{
  0%,38%{transform:translateX(-130%) skewX(-18deg);opacity:0}
  48%{opacity:1}
  72%{transform:translateX(230%) skewX(-18deg);opacity:0}
  100%{transform:translateX(230%) skewX(-18deg);opacity:0}
}
@media(max-width:760px){
  .thumb-bottom{padding:23px 7px 7px !important;}
  .game-name{font-size:11px !important;min-height:28px !important;}
  .progress{height:30px !important;}
}
@media(max-width:420px){
  .thumb-bottom{padding:21px 6px 7px !important;}
  .progress{height:29px !important;}
}

/* V18: top mobile-style header seperti contoh: logo kiri, daftar/login kanan, banner di bawah */
.page-shell{margin-top:12px !important;}
.top-authbar{
  width:100%;
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 18px;
  border-radius:0;
  background:
    radial-gradient(circle at 18% 50%,rgba(138,18,28,.52),transparent 34%),
    linear-gradient(90deg,rgba(22,3,28,.94) 0%,rgba(58,5,54,.74) 42%,rgba(42,4,20,.92) 100%);
  border:1px solid rgba(137,82,35,.58);
  border-bottom-color:rgba(255,203,93,.34);
  box-shadow:0 12px 28px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.top-authbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,213,109,.08),transparent);
  transform:translateX(-120%);
  animation:mk99TopbarShine 4.8s infinite ease-in-out;
  pointer-events:none;
}
.top-logo-link{display:flex;align-items:center;min-width:0;position:relative;z-index:1;}
.top-logo{
  display:block;
  width:min(390px,42vw);
  max-height:72px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.7));
}
.top-auth-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
.top-auth-btn{
  min-width:150px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-size:14px;
  font-weight:1000;
  letter-spacing:.3px;
  text-transform:uppercase;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.top-auth-btn::before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:inherit;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.82), inset 0 -4px 10px rgba(71,23,0,.34);
  z-index:-1;
}
.top-auth-btn::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-80%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:mk99TopBtnShine 3.4s infinite ease-in-out;
  pointer-events:none;
}
.top-auth-btn.daftar{
  background:linear-gradient(180deg,#fff8c8 0%,#ffd965 45%,#e29a2d 70%,#9d5315 100%);
  color:#1d0600;
  border:1px solid rgba(255,236,158,.92);
  box-shadow:0 10px 22px rgba(223,142,37,.34),0 0 0 4px rgba(255,210,82,.06);
}
.top-auth-btn.login{
  background:linear-gradient(180deg,#3d0b0c 0%,#210505 46%,#120202 100%);
  color:#ffe6ad;
  border:1px solid #b77a2b;
  box-shadow:0 10px 22px rgba(0,0,0,.44),0 0 0 4px rgba(255,210,82,.05), inset 0 1px 0 rgba(255,255,255,.12);
}
.top-auth-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.top-rtp-banner{
  display:block;
  width:100%;
  margin:0 0 18px;
  border-radius:0 0 18px 18px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(137,82,35,.58);
  border-top:0;
  background:#170202;
  box-shadow:0 18px 42px rgba(0,0,0,.55);
}
.top-rtp-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.16) 44%,transparent 58%);
  transform:translateX(-130%);
  animation:mk99BannerSweep 4.6s infinite ease-in-out;
  pointer-events:none;
}
.top-rtp-banner img{
  display:block;
  width:100%;
  aspect-ratio:1881/836;
  max-height:430px;
  object-fit:cover;
  object-position:center center;
}
.hero{margin-top:0 !important;padding-top:38px !important;padding-bottom:34px !important;}
.hero-actions{display:none !important;}
@keyframes mk99TopbarShine{0%,58%{transform:translateX(-120%);opacity:0}70%{opacity:1}100%{transform:translateX(120%);opacity:0}}
@keyframes mk99TopBtnShine{0%,58%{left:-80%;opacity:0}70%{opacity:1}100%{left:135%;opacity:0}}
@keyframes mk99BannerSweep{0%,50%{transform:translateX(-130%);opacity:0}62%{opacity:1}100%{transform:translateX(130%);opacity:0}}

@media(max-width:760px){
  .page-shell{width:100% !important;margin-top:0 !important;margin-bottom:44px !important;}
  .top-authbar{
    min-height:58px;
    gap:8px;
    padding:7px 10px;
    border-left:0;
    border-right:0;
  }
  .top-logo{width:min(170px,38vw);max-height:48px;}
  .top-auth-actions{gap:8px;}
  .top-auth-btn{min-width:88px;min-height:36px;font-size:11px;padding:0 12px;}
  .top-rtp-banner{
    margin-bottom:12px;
    border-radius:0;
    border-left:0;
    border-right:0;
  }
  .top-rtp-banner img{
    aspect-ratio:430/208;
    max-height:210px;
    object-fit:cover;
    object-position:center center;
  }
  .hero{width:calc(100% - 20px);margin:0 auto 12px !important;border-radius:20px !important;padding:28px 14px 26px !important;}
  .hero-topline{font-size:10px;padding:7px 11px;letter-spacing:.9px;}
  h1{font-size:clamp(34px,12vw,54px) !important;line-height:.92 !important;letter-spacing:-1.4px !important;margin-top:12px !important;}
  .stats-row,.control-panel,.provider-slider,.game-grid{width:calc(100% - 18px);margin-left:auto !important;margin-right:auto !important;}
}
@media(max-width:420px){
  .top-logo{width:min(148px,35vw);max-height:42px;}
  .top-auth-actions{gap:6px;}
  .top-auth-btn{min-width:74px;min-height:34px;font-size:10px;padding:0 9px;}
  .top-rtp-banner img{max-height:185px;}
}
@media(max-width:350px){
  .top-logo{width:122px;}
  .top-auth-btn{min-width:66px;font-size:9px;}
}


/* V19: rapikan jarak topbar-banner, tukar posisi stats ke atas hero, hero text-only */
.top-authbar{
  margin-bottom:14px !important;
}
.top-rtp-banner{
  margin:0 0 20px !important;
  border-radius:18px !important;
  border-top:1px solid rgba(137,82,35,.58) !important;
  overflow:hidden !important;
}
.top-rtp-banner img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:1881/836 !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.top-summary{
  order:1;
  margin:0 0 14px !important;
}
.text-only-hero{
  order:2;
  margin:0 0 16px !important;
  padding:34px 22px 32px !important;
}
.text-only-hero .hero-topline{
  margin-bottom:10px;
}
.text-only-hero h1{
  margin:8px 0 0 !important;
}
.text-only-hero .hero-actions,
.hero .hero-actions{
  display:none !important;
}
.stats-row.compact-stats,
.compact-stats,
.top-summary{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
  max-width:none !important;
}
.top-summary .stat-card{
  border-radius:18px !important;
  padding:17px 12px !important;
}
@media(max-width:760px){
  .top-authbar{
    margin-bottom:10px !important;
  }
  .top-rtp-banner{
    width:calc(100% - 18px) !important;
    margin:0 auto 12px !important;
    border-left:1px solid rgba(137,82,35,.58) !important;
    border-right:1px solid rgba(137,82,35,.58) !important;
    border-radius:14px !important;
  }
  .top-rtp-banner img{
    aspect-ratio:430/208 !important;
    max-height:none !important;
    object-fit:cover !important;
  }
  .top-summary{
    width:calc(100% - 18px) !important;
    margin:0 auto 10px !important;
    gap:8px !important;
  }
  .text-only-hero{
    width:calc(100% - 18px) !important;
    margin:0 auto 12px !important;
    padding:26px 12px 25px !important;
    border-radius:20px !important;
  }
  .text-only-hero h1{
    font-size:clamp(32px,11vw,48px) !important;
    line-height:.92 !important;
  }
}
@media(max-width:420px){
  .top-summary .stat-card{padding:13px 8px !important;}
  .top-summary .stat-card b{font-size:20px !important;}
  .top-summary .stat-card span{font-size:10px !important;}
  .text-only-hero .hero-topline{font-size:9.5px !important;padding:6px 9px !important;}
}


/* V20: hapus hero text block, stats dibuat lebih kecil + efek premium */
.text-only-hero,
.hero.text-only-hero{
  display:none !important;
}
.top-summary{
  margin:0 auto 16px !important;
  width:min(100%, 760px) !important;
  max-width:760px !important;
  grid-template-columns:repeat(2,minmax(150px,1fr)) !important;
  gap:12px !important;
}
.top-summary .stat-card{
  position:relative !important;
  overflow:hidden !important;
  min-height:62px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,213,109,.14), transparent 42%),
    linear-gradient(180deg, rgba(35,5,5,.96), rgba(12,2,2,.98)) !important;
  border:1px solid rgba(214,150,45,.82) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 20px rgba(255,192,66,.08) !important;
  animation:mk99StatGlow 2.8s ease-in-out infinite alternate !important;
}
.top-summary .stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0%, transparent 36%, rgba(255,238,167,.30) 50%, transparent 64%, transparent 100%);
  transform:translateX(-140%);
  animation:mk99StatShine 4.2s ease-in-out infinite;
  pointer-events:none;
}
.top-summary .stat-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:15px;
  border:1px solid rgba(255,223,129,.10);
  pointer-events:none;
}
.top-summary .stat-card b{
  position:relative;
  font-size:clamp(20px,2.2vw,26px) !important;
  line-height:1.05 !important;
  margin-bottom:3px !important;
  color:#fff7df !important;
  text-shadow:0 2px 10px rgba(255,183,54,.22),0 1px 0 #000 !important;
}
.top-summary .stat-card span{
  position:relative;
  font-size:10.5px !important;
  line-height:1.1 !important;
  color:#ffdc8f !important;
  letter-spacing:.65px !important;
  text-shadow:0 1px 0 #000 !important;
}
@keyframes mk99StatShine{
  0%, 58%{transform:translateX(-145%);opacity:0;}
  66%{opacity:.75;}
  100%{transform:translateX(145%);opacity:0;}
}
@keyframes mk99StatGlow{
  from{box-shadow:0 10px 26px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.12),0 0 14px rgba(255,192,66,.05);}
  to{box-shadow:0 12px 30px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.16),0 0 28px rgba(255,192,66,.18);}
}
@media(max-width:760px){
  .top-summary{
    width:calc(100% - 18px) !important;
    max-width:none !important;
    margin:0 auto 10px !important;
    gap:8px !important;
  }
  .top-summary .stat-card{
    min-height:54px !important;
    padding:9px 6px !important;
    border-radius:14px !important;
  }
  .top-summary .stat-card b{font-size:18px !important;}
  .top-summary .stat-card span{font-size:9px !important;letter-spacing:.45px !important;}
}
@media(max-width:350px){
  .top-summary{grid-template-columns:1fr 1fr !important;gap:6px !important;}
  .top-summary .stat-card b{font-size:16px !important;}
  .top-summary .stat-card span{font-size:8.5px !important;}
}

/* V21: tulisan berjalan di antara topbar dan banner + statistik lebih compact/safe area */
.top-authbar{
  margin-bottom:8px !important;
}
.warning-marquee{
  width:100%;
  height:34px;
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  margin:0 0 10px;
  border-radius:12px;
  border:1px solid rgba(255,86,86,.72);
  background:
    radial-gradient(circle at 12% 50%, rgba(255,213,109,.16), transparent 34%),
    linear-gradient(90deg, rgba(55,4,5,.96), rgba(128,9,15,.70) 50%, rgba(44,3,4,.96));
  box-shadow:
    0 8px 22px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 14px rgba(255,58,58,.16);
}
.warning-marquee::before,
.warning-marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:64px;
  z-index:2;
  pointer-events:none;
}
.warning-marquee::before{left:0;background:linear-gradient(90deg,#2c0304 0%,transparent 100%);}
.warning-marquee::after{right:0;background:linear-gradient(270deg,#2c0304 0%,transparent 100%);}
.marquee-track{
  display:inline-flex;
  align-items:center;
  gap:54px;
  white-space:nowrap;
  will-change:transform;
  animation:mk99WarningMarquee 24s linear infinite;
}
.marquee-track span{
  display:inline-flex;
  align-items:center;
  color:#ffe58f;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.7px;
  text-transform:uppercase;
  text-shadow:0 1px 0 #000,0 0 12px rgba(255,213,109,.30);
}
.marquee-track span::before{
  content:"⚠";
  margin-right:10px;
  color:#ff3d3d;
  text-shadow:0 0 10px rgba(255,58,58,.75);
}
@keyframes mk99WarningMarquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.top-rtp-banner{
  margin:0 0 14px !important;
}

/* Statistik dibuat lebih kecil, lebih dekat, dan masuk safe area */
.top-summary{
  width:min(100%, 600px) !important;
  max-width:600px !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 auto 14px !important;
  padding:0 4px !important;
}
.top-summary .stat-card{
  min-height:52px !important;
  padding:8px 10px !important;
  border-radius:14px !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 18px rgba(255,192,66,.10) !important;
}
.top-summary .stat-card b{
  font-size:clamp(18px,1.85vw,22px) !important;
  margin-bottom:2px !important;
}
.top-summary .stat-card span{
  font-size:9.5px !important;
  letter-spacing:.55px !important;
}

@media(max-width:760px){
  .top-authbar{margin-bottom:6px !important;}
  .warning-marquee{
    width:calc(100% - 18px);
    height:30px;
    margin:0 auto 9px;
    border-radius:10px;
  }
  .marquee-track{gap:42px;animation-duration:20s;}
  .marquee-track span{font-size:11px;letter-spacing:.45px;}
  .top-summary{
    width:calc(100% - 36px) !important;
    max-width:460px !important;
    gap:8px !important;
    margin:0 auto 12px !important;
    padding:0 !important;
  }
  .top-summary .stat-card{
    min-height:48px !important;
    padding:7px 8px !important;
  }
  .top-summary .stat-card b{font-size:17px !important;}
  .top-summary .stat-card span{font-size:8.8px !important;}
}
@media(max-width:420px){
  .warning-marquee{height:28px;width:calc(100% - 16px);}
  .marquee-track span{font-size:10px;}
  .top-summary{width:calc(100% - 28px) !important;gap:7px !important;}
  .top-summary .stat-card{min-height:44px !important;padding:6px 6px !important;}
  .top-summary .stat-card b{font-size:16px !important;}
  .top-summary .stat-card span{font-size:8px !important;}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation-duration:60s;}
}

/* V22: mobile banner center + stat boxes same safe width as search */
@media(max-width:760px){
  .page-shell{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Banner dibuat benar-benar center dan tidak ter-crop di mobile */
  .top-rtp-banner{
    display:block !important;
    width:calc(100% - 18px) !important;
    max-width:560px !important;
    margin:0 auto 12px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }
  .top-rtp-banner img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  /* Rata-rata RTP + Update disamakan dengan safe width pencarian */
  .top-summary,
  .stats-row.compact-stats.top-summary{
    width:calc(100% - 18px) !important;
    max-width:560px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin:0 auto 12px !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  .top-summary .stat-card,
  .stats-row.compact-stats.top-summary .stat-card{
    min-height:44px !important;
    padding:6px 6px !important;
    border-radius:13px !important;
  }
  .top-summary .stat-card b{
    font-size:16px !important;
    line-height:1 !important;
    margin-bottom:3px !important;
  }
  .top-summary .stat-card span{
    font-size:8.5px !important;
    letter-spacing:.35px !important;
  }

  .control-panel.search-only{
    width:calc(100% - 18px) !important;
    max-width:560px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
}

@media(max-width:420px){
  .top-rtp-banner,
  .top-summary,
  .stats-row.compact-stats.top-summary,
  .control-panel.search-only{
    width:calc(100% - 16px) !important;
    max-width:none !important;
  }
  .top-summary .stat-card,
  .stats-row.compact-stats.top-summary .stat-card{
    min-height:42px !important;
    padding:6px 5px !important;
  }
}

/* V24: efek logo MK99 kiri atas - glow, shine, hover bounce */
.top-logo-link{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.top-logo-link::before{
  content:"";
  position:absolute;
  inset:-10px -16px;
  border-radius:18px;
  background:radial-gradient(circle at 45% 50%, rgba(255,215,105,.30), transparent 52%);
  filter:blur(10px);
  opacity:.60;
  z-index:-1;
  animation:mk99LogoAura 2.8s ease-in-out infinite alternate;
  pointer-events:none;
}
.top-logo-link::after{
  content:"";
  position:absolute;
  top:-35%;
  bottom:-35%;
  left:-58%;
  width:34%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.82) 48%, transparent 100%);
  transform:skewX(-18deg);
  opacity:0;
  z-index:2;
  animation:mk99LogoShine 3.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}
.top-logo{
  transform-origin:center center !important;
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.72))
    drop-shadow(0 0 10px rgba(255,215,105,.18)) !important;
  animation:mk99LogoFloat 3.2s ease-in-out infinite;
  will-change:transform,filter;
}
.top-logo-link:hover .top-logo{
  animation-play-state:paused;
  transform:translateY(-2px) scale(1.035) !important;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.76))
    drop-shadow(0 0 16px rgba(255,225,117,.42)) !important;
}
@keyframes mk99LogoFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-3px) scale(1.012);}
}
@keyframes mk99LogoAura{
  from{opacity:.38;transform:scale(.96);}
  to{opacity:.78;transform:scale(1.04);}
}
@keyframes mk99LogoShine{
  0%,58%{left:-60%;opacity:0;}
  66%{opacity:.80;}
  100%{left:128%;opacity:0;}
}
@media(max-width:540px){
  .top-logo-link::before{inset:-6px -10px;border-radius:14px;filter:blur(8px);}
  .top-logo-link::after{width:42%;}
  .top-logo{animation-duration:3.8s;}
}