/* Home: winners / popular games panel under the game list.
   Gradient cards: every row is a card whose colour follows its rank (gold, silver, bronze, then crimson -> violet). Rows slide up by themselves. */
@property --hwa{syntax:'<angle>';inherits:false;initial-value:0deg}
.hw{--g1:#f8dd86;--g2:#f1bf66;--g3:#e0a24a;margin:6px 9.5px 4px;border-radius:20px;padding:1.5px;position:relative;font-family:var(--en,Roboto),var(--bn,'Hind Siliguri'),'Hind Siliguri','Noto Sans Bengali','Segoe UI',system-ui,sans-serif;
  background:conic-gradient(from var(--hwa),#ffd36b,#ff4f81 22%,#7a46ff 42%,#ffd36b 58%,#ff4f81 80%,#ffd36b);animation:hwSpin 10s linear infinite;box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 26px rgba(255,79,129,.14)}
@keyframes hwSpin{to{--hwa:360deg}}
.hw[hidden]{display:none}
.hw-in{position:relative;border-radius:18.5px;overflow:hidden;
  background:radial-gradient(90% 70% at 12% -5%,rgba(255,79,129,.34),transparent 62%),radial-gradient(80% 60% at 105% 105%,rgba(122,70,255,.3),transparent 60%),linear-gradient(165deg,#4b0b26 0%,#2c0717 55%,#1c0510 100%)}
.hw-in::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-32deg,transparent,transparent 9px,rgba(255,255,255,.022) 9px,rgba(255,255,255,.022) 10px);pointer-events:none}
.hw-in::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.075) 50%,transparent 62%);background-size:260% 100%;animation:hwSheen 7s ease-in-out infinite;pointer-events:none}
@keyframes hwSheen{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}

/* optional title bar (Admin: home_panel_header) */
.hw-head{position:relative;display:flex;align-items:center;gap:9px;padding:13px 14px 9px}
.hw-head::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,211,107,.6),rgba(255,79,129,.5),transparent)}
.hw-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#fdf3da,#fcf5e4);color:#d6b076;box-shadow:0 0 0 3px rgba(253,243,218,.16),0 3px 12px rgba(0,0,0,.4)}
.hw-ic svg{width:27px;height:27px}
.hw-t{font-size:16.5px;font-weight:700;background:linear-gradient(100deg,#fff,#ffd98a 45%,#ff9bb8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}
.hw-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:#ffd98a;background:rgba(0,0,0,.3);border:1px solid rgba(255,211,107,.28);border-radius:11px;padding:3px 9px 3px 8px}
.hw-live i{width:7px;height:7px;border-radius:50%;background:#ff5d7e;animation:hwPulse 1.6s infinite}
@keyframes hwPulse{0%{box-shadow:0 0 0 0 rgba(255,93,126,.65)}70%{box-shadow:0 0 0 7px rgba(255,93,126,0)}100%{box-shadow:0 0 0 0 rgba(255,93,126,0)}}

/* the sliding window */
.hw-win{position:relative;height:var(--hw-h,234px);overflow-y:auto;overflow-x:hidden;padding:6px 9px 0;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain;touch-action:pan-y;cursor:grab;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12px,#000 calc(100% - 20px),transparent 100%)}
.hw-win::-webkit-scrollbar{display:none}
.hw-win.drag{cursor:grabbing;user-select:none}
.hw-track{will-change:transform}

/* row = gradient card; colours follow the rank */
.hw-row{--c1:#ff5f8d;--c2:#8d3cff;--ca:rgba(255,95,141,.16);position:relative;display:grid;grid-template-columns:30px 50px 1fr auto;align-items:center;gap:10px;height:62px;margin:0 0 8px;padding:5px 9px 5px 8px;border-radius:17px;border:1px solid transparent;
  background:linear-gradient(100deg,var(--ca) 0%,rgba(132,28,78,.62) 48%,rgba(86,44,160,.5) 100%) padding-box,linear-gradient(100deg,var(--c1),rgba(255,255,255,.07) 75%) border-box;transition:transform .15s}
.hw-row:active{transform:scale(.985)}
.hw-row.r1{--c1:#ffd36b;--c2:#f0a53a;--ca:rgba(255,211,107,.24);box-shadow:0 6px 18px rgba(240,165,58,.22)}
.hw-row.r2{--c1:#e9eff9;--c2:#9aa7bd;--ca:rgba(205,218,238,.13)}
.hw-row.r3{--c1:#f6bb8c;--c2:#b8693a;--ca:rgba(246,187,140,.17)}
.hw-rk{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5);position:relative}
.hw-rk b{font-size:13.5px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.r1 .hw-rk b,.r2 .hw-rk b,.r3 .hw-rk b{color:#4a2108;text-shadow:none}
.r1 .hw-rk::before{content:'';position:absolute;left:50%;top:-9px;width:16px;height:10px;margin-left:-8px;background:linear-gradient(180deg,#fff0b8,#e0a24a);clip-path:polygon(0 100%,0 25%,25% 55%,50% 0,75% 55%,100% 25%,100% 100%);filter:drop-shadow(0 0 4px rgba(255,200,90,.9))}
.hw-th{width:50px;height:50px;border-radius:14px;padding:2px;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 14px var(--ca);position:relative}
.hw-th span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:12px;overflow:hidden;background:#2a0710;color:#ffe6a3;font-weight:800;font-size:19px;position:relative}
.hw-th span::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 38%,transparent 55%);pointer-events:none}
.hw-th img{width:100%;height:100%;object-fit:cover;display:block}
.hw-inf{min-width:0;display:flex;flex-direction:column;gap:1px}
.hw-nm{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-us{font-size:10.5px;color:#d9a8bb;letter-spacing:.3px;white-space:nowrap}
.hw-us.pv{align-self:flex-start;color:#fff;background:linear-gradient(100deg,rgba(255,95,141,.35),rgba(141,60,255,.35));border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:0 8px;line-height:16px;font-weight:600;font-size:10px}
.hw-am{font-size:16px;font-weight:800;line-height:1.2;background:linear-gradient(100deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hw-pl{font-size:12px;font-weight:700;letter-spacing:.2px}
.hw-pl::before{content:'';display:inline-block;width:9px;height:11px;margin:0 5px -1px 0;background:linear-gradient(180deg,#ffd36b,#ff5f8d);clip-path:polygon(50% 0,80% 38%,100% 68%,80% 100%,20% 100%,0 68%,20% 38%);-webkit-text-fill-color:initial;border-radius:0}
.hw-am:not(.hw-pl)::before{content:'';display:inline-block;width:10px;height:10px;margin:0 5px -1px 0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,var(--c1) 55%,var(--c2));-webkit-text-fill-color:initial;box-shadow:0 0 6px var(--ca)}
.hw-go{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;border-radius:16px;padding:0 13px 0 11px;height:30px;font:700 12px/1 'Hind Siliguri','Inter',sans-serif;color:#5a2200;white-space:nowrap;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#ffe9a0,#f6c04f 55%,#ee9b3a);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.65);transition:transform .12s}
.hw-go:active{transform:scale(.94)}
.hw-go::before{content:'';width:0;height:0;border-left:7px solid #7a2a00;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.hw-go::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:hwShine 3.4s ease-in-out infinite}
@keyframes hwShine{0%,55%{left:-60%}100%{left:130%}}

.hw-static .hw-win{height:auto;overflow:visible;padding-bottom:2px;cursor:auto;-webkit-mask-image:none;mask-image:none}
.hw-nohead .hw-win{padding-top:6px}
.hw-empty{position:relative;text-align:center;padding:20px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:6px}
.hw-empty-t{font-size:17px;font-weight:700;background:linear-gradient(100deg,#fff3c4,#ffb36b 50%,#ff7ba3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hw-empty-s{font-size:12px;color:#d9a8bb;margin-bottom:8px}
.hw-empty .hw-go{height:34px;padding:0 20px 0 17px;font-size:13px}
@media (prefers-reduced-motion:reduce){.hw,.hw-in::after,.hw-live i,.hw-go::after{animation:none}}

.hw-row.rw .hw-th span svg{width:60%;height:60%;color:#ffd98a}
.hw-row.rw .hw-th span{background:linear-gradient(160deg,#5b1d44,#2a0714)}