/* Home: category circles + provider panel + game grid.
   Layout and sizes follow the reference (360px-wide phone); colours are the brand crimson + gold. */
.hc{--hc-bg:#1f0009;--hc-c1:#6e1a38;--hc-c2:#4a1228;--hc-a1:#f0356e;--hc-a2:#c4113f;--hc-a3:#8f0a2e;--hc-glow:rgba(240,53,110,.65);
  --hc-p1:#7a1a3a;--hc-p2:#461225;--hc-pill:#3a0013;--hc-btn:#390a1a;--hc-g1:#f8dd86;--hc-g2:#f1bf66;--hc-g3:#e0a24a;--hc-muted:#c98aa0;
  background:var(--hc-bg);padding:0 0 18px;font-family:var(--en,Roboto),var(--bn,'Hind Siliguri'),'Hind Siliguri','Noto Sans Bengali','Segoe UI',system-ui,sans-serif;color:#fff;overflow:hidden}
.hc *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* ---------- category buttons (shape, size, colours and glow come from Admin -> Settings -> Home page -> Category buttons) ---------- */
.hc{--cat-w:53px;--cat-h:53px;--cat-r:50%;--cat-ic:24px;--cat-ics:1.1;--cat-lb:12px;--cat-gap:9.4px;--cat-tx:#fff;--cat-ring:rgba(255,222,140,.7)}
/* the glow of the active button needs room above and below: the padding gives it (gap above ~16px, below ~17px), the negative margin takes back the extra below */
.hc-cats{display:flex;gap:var(--cat-gap);padding:13px 9.5px 12px;margin:0 0 -10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding:0 9.5px;overscroll-behavior-x:contain}
.hc-cats::-webkit-scrollbar{display:none}
.hc-cat{flex:0 0 var(--cat-w);width:var(--cat-w);height:var(--cat-h);border:0;border-radius:var(--cat-r);padding:0;position:relative;cursor:pointer;color:var(--cat-tx);font-family:inherit;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(180deg,var(--hc-c1),var(--hc-c2));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),0 2px 5px rgba(0,0,0,.4);
  transition:background .25s,box-shadow .25s,transform .2s}
.hc-cat:active{transform:scale(.94)}
.hc-cat .ic{position:relative;width:var(--cat-ic);height:var(--cat-ic);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cat-ic)*.83);line-height:1;transition:transform .25s;flex:none}
.hc-cat .ic svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.hc-cat .ic img{width:100%!important;height:100%!important;object-fit:contain}
.hc-cat .lb{position:relative;max-width:calc(var(--cat-w) + 8px);text-align:center;font-size:var(--cat-lb);line-height:1.15;font-weight:700;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.5);letter-spacing:0;flex:none}
.hc-cat.on{background:linear-gradient(180deg,var(--hc-a1),var(--hc-a2) 58%,var(--hc-a3));color:var(--cat-tx-on,var(--cat-tx));
  box-shadow:0 0 0 2px var(--cat-ring),0 0 16px 3px var(--hc-glow),inset 0 1px 1px rgba(255,255,255,.55)}
.hc-cat.on .ic{transform:scale(var(--cat-ics))}
.hc.no-glow .hc-cat.on{box-shadow:0 0 0 2px var(--cat-ring),inset 0 1px 1px rgba(255,255,255,.55)}

/* ---------- body: panel + games, slides left/right ---------- */
.hc-wrap{display:grid;overflow:hidden;position:relative}
.hc-body,.hc-pane{grid-area:1/1;min-width:0}
.hc-stage{display:grid;overflow:hidden;position:relative}
.hc-in-r{animation:hcInR .34s cubic-bezier(.22,.8,.3,1) both}
.hc-in-l{animation:hcInL .34s cubic-bezier(.22,.8,.3,1) both}
.hc-out-l{animation:hcOutL .34s cubic-bezier(.22,.8,.3,1) both;pointer-events:none}
.hc-out-r{animation:hcOutR .34s cubic-bezier(.22,.8,.3,1) both;pointer-events:none}
@keyframes hcInR{from{transform:translateX(100%);opacity:.4}to{transform:none;opacity:1}}
@keyframes hcInL{from{transform:translateX(-100%);opacity:.4}to{transform:none;opacity:1}}
@keyframes hcOutL{from{transform:none;opacity:1}to{transform:translateX(-100%);opacity:.3}}
@keyframes hcOutR{from{transform:none;opacity:1}to{transform:translateX(100%);opacity:.3}}

/* ---------- search + providers panel ---------- */
.hc-panel{margin:15px 9.5px 0;border-radius:14px;padding:14px 6.5px 14.5px;background:linear-gradient(180deg,var(--hc-p1),var(--hc-p2));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 10px rgba(0,0,0,.35)}
.hc-top{display:flex;align-items:center;justify-content:space-between}
.hc-search{flex:0 0 214px;width:214px;height:28px;border-radius:14px;background:var(--hc-pill);border:1.5px solid rgba(252,255,253,.88);display:flex;align-items:center;padding:0 10px;gap:8px}
.hc-search svg{flex:0 0 15px;width:15px;height:15px;opacity:.95}
.hc-search input{flex:1;min-width:0;width:100%;height:100%;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;color:#fff;font:400 11px/1 inherit;font-family:inherit;padding:0;margin:0}
.hc-search input::placeholder{color:rgba(255,255,255,.5);opacity:1}
.hc-tbtns{display:flex;gap:4.5px}
.hc-tb{width:28px;height:28px;border-radius:50%;border:0;padding:0;background:var(--hc-btn);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.hc-tb:active{transform:scale(.92)}
.hc-tb svg{width:15px;height:15px;display:block}
.hc-tb.on{background:linear-gradient(180deg,var(--hc-g1),var(--hc-g2))}
.hc-tb.on svg path,.hc-tb.on svg rect,.hc-tb.on svg circle{fill:#6a2300}
.hc-chiprow{display:flex;align-items:center;gap:9px;margin-top:11.5px;padding:0 1.5px}
.hc-arr{flex:0 0 14.5px;width:14.5px;height:14.5px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(180deg,var(--hc-g1),var(--hc-g2));color:#6a2300}
.hc-arr.off{background:#6a3a5a;color:#2d0f20;opacity:.8}
.hc-arr svg{width:8px;height:8px}
.hc-chips{flex:1;min-width:0;display:flex;gap:4.5px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.hc-chips::-webkit-scrollbar{display:none}
.hc-chip{flex:0 0 66px;width:66px;height:34px;border:0;border-radius:17px;padding:0 7px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--hc-pill);color:#fff;font:700 10px/1 'Hind Siliguri','Inter',sans-serif;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.07);overflow:hidden;transition:background .2s,transform .15s}
.hc-chip:active{transform:scale(.95)}
.hc-chip img{max-width:100%;max-height:22px;object-fit:contain;display:block}
.hc-chip img.hc-white{filter:brightness(0) invert(1)}
.hc-chip img.hc-scr{filter:grayscale(1) contrast(2.4) brightness(1.15);mix-blend-mode:screen}
.hc-chip img.hc-inv{filter:grayscale(1) invert(1) contrast(2.4) brightness(1.15);mix-blend-mode:screen}
.hc-chip.on img,.hc-chip.on img.hc-white,.hc-chip.on img.hc-scr,.hc-chip.on img.hc-inv{filter:none;mix-blend-mode:normal}
.hc-chip.on{background:linear-gradient(180deg,#5a1226,#2e0a16);color:#ffe9b0;box-shadow:0 0 0 1.5px var(--hc-g1),0 0 8px rgba(248,221,134,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.hc-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ---------- games grid ---------- */
.hc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 15px;padding:14.5px 9.5px 4px}
.hc-card{position:relative;min-width:0;cursor:pointer;animation:hcPop .35s ease both}
@keyframes hcPop{from{opacity:0}to{opacity:1}}   /* fade only: a card that also slides up made the page look like it jumps on every reload */
.hc-thumb{position:relative;width:100%;aspect-ratio:1/1;border-radius:9px;overflow:hidden;background:#2a0710;box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .2s}
.hc-card:active .hc-thumb{transform:scale(.97)}
.hc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s ease;background:#2a0710}
.hc-img.ld{opacity:1}
.hc-thumb .thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hc-thumb .thumb--placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;text-align:center;
  background:linear-gradient(160deg,hsl(var(--thumb-h) 62% 38%),hsl(var(--thumb-h2) 70% 20%))}
.hc-thumb .thumb__deco{position:absolute;inset:0;background:repeating-linear-gradient(-32deg,transparent,transparent 7px,rgba(255,255,255,.04) 7px,rgba(255,255,255,.04) 8px)}
.hc-thumb .thumb__glyph{position:relative;font-size:26px;font-weight:900;color:#fff7d6;text-shadow:0 2px 4px rgba(0,0,0,.45)}
.hc-thumb .thumb__title{position:relative;font-size:9px;font-weight:700;color:rgba(255,251,238,.95);line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hc-thumb .thumb__plogo{position:relative;max-width:70%;display:flex}.hc-thumb .thumb__plogo img{max-width:100%;max-height:28px;object-fit:contain}
.hc-thumb .thumb__plogo img.hc-white{filter:brightness(0) invert(1)}
.hc-thumb .thumb__plogo img.hc-scr{filter:grayscale(1) contrast(2.4) brightness(1.15);mix-blend-mode:screen}
.hc-thumb .thumb__plogo img.hc-inv{filter:grayscale(1) invert(1) contrast(2.4) brightness(1.15);mix-blend-mode:screen}
.hc-badge{position:absolute;left:0;top:0;z-index:2;min-width:44px;max-width:72%;height:15.5px;padding:0 7px 0 5px;border-radius:9px 0 8px 0;display:flex;align-items:center;
  background:linear-gradient(180deg,#fbe6a0,#f1c06a 70%,#e0a24a);color:#4a2100;font:800 8.5px/1 'Hind Siliguri','Inter',sans-serif;letter-spacing:.2px;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.hc-badge span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-badge img{max-height:10px;max-width:50px;object-fit:contain;display:block;filter:brightness(0)}
.hc-badge img.hb-inv{filter:grayscale(1) contrast(2.4);mix-blend-mode:multiply}
.hc-badge img.hb-scr{filter:grayscale(1) invert(1) contrast(2.4);mix-blend-mode:multiply}
.hc-star{position:absolute;right:5px;top:5px;z-index:2;width:18px;height:18px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s}
.hc-star:active{transform:scale(.85)}
.hc-star svg{width:11px;height:11px;fill:#fff}
.hc-star.on{background:linear-gradient(180deg,var(--hc-g1),var(--hc-g2))}.hc-star.on svg{fill:#7a2a00}
.hc-name{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:20px 5px 6px;text-align:center;font-size:var(--hc-name-fs,11px);line-height:1.2;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);
  background:linear-gradient(0deg,rgba(122,12,42,.97) 0%,rgba(143,10,46,.88) 38%,rgba(143,10,46,.45) 72%,rgba(143,10,46,0) 100%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-thumb .thumb__title{display:none}
.hc-more{height:1px}
.hc-grid.hc-busy{opacity:.45;pointer-events:none;transition:opacity .15s}
.hc-pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;padding:14px 9px 6px}
.hc-pg{min-width:32px;height:32px;padding:0 9px;border:0;border-radius:16px;background:var(--hc-btn);color:#fff;font:700 13px/1 'Hind Siliguri','Inter',sans-serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .12s}
.hc-pg:active{transform:scale(.92)}
.hc-pg.on{background:linear-gradient(180deg,var(--hc-g1),var(--hc-g2) 60%,var(--hc-g3));color:#5a2200;box-shadow:0 1px 3px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.6)}
.hc-pg[disabled]{opacity:.35;cursor:default}
.hc-pg.dots{background:none;box-shadow:none;min-width:18px;padding:0 2px;color:var(--hc-muted);cursor:default}
.hc-pg svg{width:11px;height:11px;display:block}

/* ---------- loading / empty ---------- */
.hc-state{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 20px;text-align:center;color:var(--hc-muted);position:relative}
.hc-state .hc-empty-ic{width:128px;height:96px;opacity:.5}
.hc-state .hc-empty-tx{font-size:14px;font-weight:600;color:#a96a86}
.hc-loadbox{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:118px;border-radius:10px;background:rgba(40,12,24,.88);box-shadow:0 4px 18px rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;font-size:11px;font-weight:500;z-index:3}
.hc-spin{width:32px;height:32px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:hcSpin .8s linear infinite}
@keyframes hcSpin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .hc-in-r,.hc-in-l,.hc-out-l,.hc-out-r,.hc-card{animation:none!important}
  .hc-chips{scroll-behavior:auto}
}

/* All Providers: provider cards (smaller, 4 per row; premium white border, logo area + name plate) */
.hc-grid.hc-pgrid{grid-template-columns:repeat(4,1fr);gap:9px 8px;padding:12px 9.5px 4px}
.hc-pcard{min-width:0}
.hc-pcard .hc-thumb{box-sizing:border-box;aspect-ratio:auto;height:auto;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;border:1.5px solid transparent;
  background:linear-gradient(180deg,#7a1a3a,#461225) padding-box,linear-gradient(145deg,#fff 0%,#d9dce2 30%,#fff 55%,#b9bec8 80%,#fff 100%) border-box;
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22)}
.hc-plogo{position:relative;height:0;padding-bottom:72%}
.hc-plogo img{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 9px);object-fit:contain;display:block}
.hc-plogo .hc-pi{position:absolute;left:4px;right:4px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;color:#fff;text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-pn{margin:0 4px 4px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;
  background:linear-gradient(180deg,var(--hc-g1),var(--hc-g2) 60%,var(--hc-g3));box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.6);
  font-size:10.5px;font-weight:800;color:#6e1a38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-pn span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-pback{display:flex;align-items:center;gap:6px;margin-top:10px;height:26px;padding:0 12px 0 8px;border:0;border-radius:13px;background:var(--hc-pill);color:#fff;font:700 12px/1 inherit;font-family:inherit;cursor:pointer}
.hc-pback[hidden]{display:none}
.hc-pback svg{width:14px;height:14px}

/* colour sweep: every few seconds a soft golden light band runs left -> right over each card (game + provider) */
.hc-thumb::after{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,222,140,0) 0%,rgba(255,226,150,.38) 45%,rgba(255,255,255,.5) 52%,rgba(255,222,140,0) 100%);
  transform:translateX(-120%) skewX(-12deg);animation:hcSweep 4.5s ease-in-out infinite;animation-delay:calc(var(--hc-p,0) * -4.5s)}
.hc-noshine .hc-thumb::after{display:none}
@keyframes hcSweep{0%{transform:translateX(-120%) skewX(-12deg)}30%,100%{transform:translateX(260%) skewX(-12deg)}}
@media (prefers-reduced-motion:reduce){.hc-thumb::after{animation:none;display:none}}

/* rotating light border around every card (game + provider) */
@property --hc-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.hc-card::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:9px;padding:1.5px;
  background:conic-gradient(from var(--hc-ang),rgba(255,222,140,0) 0deg,rgba(255,222,140,0) 220deg,#f1bf66 290deg,#fff 330deg,rgba(255,222,140,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask-composite:exclude;animation:hcRing 3.2s linear infinite;animation-delay:calc(var(--hc-p,0) * -3.2s)}
.hc-pcard::before{border-radius:10px}
@keyframes hcRing{to{--hc-ang:360deg}}
.hc-noborder .hc-card::before{display:none}
@media (prefers-reduced-motion:reduce){.hc-card::before{animation:none;display:none}}

/* every card in a row runs its animations at a different moment (games: 3 per row, providers: 4 per row) */
.hc-grid>.hc-card:nth-child(3n+1){--hc-p:0}
.hc-grid>.hc-card:nth-child(3n+2){--hc-p:.33}
.hc-grid>.hc-card:nth-child(3n){--hc-p:.66}
.hc-pgrid>.hc-card:nth-child(4n+1){--hc-p:0}
.hc-pgrid>.hc-card:nth-child(4n+2){--hc-p:.25}
.hc-pgrid>.hc-card:nth-child(4n+3){--hc-p:.5}
.hc-pgrid>.hc-card:nth-child(4n){--hc-p:.75}