/* ─── Reset ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}

/* ─── TikTok Design Tokens ───────────────────────────────────────────────── */
:root{
  /* TikTok brand palette */
  --tk-red:    #fe2c55;
  --tk-teal:   #25f4ee;
  --tk-black:  #000000;
  --tk-dark:   #121212;
  --tk-txt:    #ffffff;
  --tk-dim:    rgba(255,255,255,.55);
  --tk-sep:    rgba(255,255,255,.1);

  /* Backward-compat aliases (JS uses css vars for some) */
  --cyan: #25f4ee;
  --mag:  #fe2c55;
  --yel:  #fffc00;
  --bg:   #000000;
  --card: #121212;
  --txt:  #ffffff;
  --dim:  rgba(255,255,255,.55);

  /* Typography — Inter everywhere for clean readability */
  --fd:'Inter',sans-serif;              /* headings / game names */
  --fb:'Inter',sans-serif;             /* body                  */
  --fm:'Inter',sans-serif;             /* counters / labels     */
  --brand:'Orbitron',sans-serif;       /* brand name only       */

  --vh:100svh;
  --feed-max:480px;
  --bnav-h:52px;   /* bottom nav height */
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html,body{width:100%;height:100%;overflow:hidden;background:var(--tk-black)}
body{
  color:var(--tk-txt);font-family:var(--fb);
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  position:fixed;inset:0;
}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
img,video{display:block}
a{text-decoration:none}

/* ─── App shell ──────────────────────────────────────────────────────────── */
#app{
  position:fixed;inset:0;
  height:var(--vh);
  overflow:hidden;
  background:var(--tk-black);
  isolation:isolate;
  display:flex;
  justify-content:center;
  align-items:stretch;
}

/* ─── Top bar ────────────────────────────────────────────────────────────── */
.tb{
  position:fixed;top:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:var(--feed-max);
  z-index:50;
  display:flex;flex-direction:column;
  padding:10px 10px 0;
  background:linear-gradient(180deg,rgba(0,0,0,.88) 60%,transparent 100%);
}
.tb-row1{
  display:flex;align-items:center;gap:4px;
  padding-bottom:6px;
}

/* Brand logo + title in top bar (row 1) */
.tb-brand{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  pointer-events:none;
}
.tb-logo{height:26px;width:auto;object-fit:contain;flex-shrink:0}
.tb-title{
  font-family:var(--brand);font-size:.88rem;font-weight:800;
  color:#fff;letter-spacing:.5px;white-space:nowrap;
}

/* Hamburger / back button */
.bk{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:background .18s;
}
.bk:active{background:rgba(255,255,255,.18)}

/* ─── Category tab strip ─────────────────────────────────────────────────── */
/* TikTok style: plain text, active tab = white + underline */
.cts{
  display:flex;gap:0;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* IE/Edge */
  width:100%;
  align-items:flex-end;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;  /* smooth momentum on iOS */
  scroll-behavior:smooth;
  cursor:grab;
}
.cts:active{cursor:grabbing}
.cts::-webkit-scrollbar{display:none}
.cts button{
  padding:6px 12px 8px;
  border-radius:0;
  font-family:var(--fb);
  font-size:.72rem;font-weight:600;
  letter-spacing:.2px;
  text-transform:none;
  white-space:nowrap;
  color:rgba(255,255,255,.5);
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.cts button.on{
  color:#fff;
  font-weight:700;
  font-size:.76rem;
  border-bottom-color:#fff;
}

/* ─── Language toggle (top-right) ────────────────────────────────────────── */
.fd-lang-nav{
  display:flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.8px;
  flex-shrink:0;font-family:var(--fm);
  transition:background .2s;
}
.fd-lang-nav:active{background:rgba(255,255,255,.2)}

/* ─── Slide counter ──────────────────────────────────────────────────────── */
.cnt{
  position:fixed;top:52px;
  right:calc(50% - var(--feed-max)/2 + 12px);
  z-index:52;
  font-family:var(--fm);font-size:.66rem;color:rgba(255,255,255,.45);
}
.cnt b{color:var(--tk-red);font-size:.78rem}

/* ─── Scroll feed ────────────────────────────────────────────────────────── */
.fd{
  width:100%;max-width:var(--feed-max);
  height:var(--vh);
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  overscroll-behavior-y:contain;
  position:relative;
}
.fd::-webkit-scrollbar{display:none}

/* ─── Single slide ───────────────────────────────────────────────────────── */
.sl{
  position:relative;
  width:100%;
  height:var(--vh);
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;
  background:#000;
}
.gc{position:absolute;inset:0;overflow:hidden;background:#000}

/* ─── Media layer ────────────────────────────────────────────────────────── */
.media-layer{
  position:absolute;inset:0;
  overflow:hidden;
  background:#000;
}
.img-bg{
  position:absolute;
  inset:-60px;
  background-size:cover;
  background-position:center 20%;
  background-repeat:no-repeat;
  filter:blur(52px) brightness(0.12) saturate(1.8);
  transform:scale(1.15);
  z-index:0;
}
.media-layer img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;z-index:1;
}
.media-layer video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;z-index:2;
  opacity:0;
  transition:opacity .35s ease;
  background:transparent;
}
.media-layer video.on{opacity:1}

/* ─── Gradient overlay ───────────────────────────────────────────────────── */
/* TikTok-style: heavier bottom fade, light top fade */
.grd{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.45)  0%,
    rgba(0,0,0,0)    18%,
    rgba(0,0,0,0)    50%,
    rgba(0,0,0,.55)  72%,
    rgba(0,0,0,.92)  100%
  );
}

/* ─── Right action bar ───────────────────────────────────────────────────── */
/* TikTok-style: larger buttons, white icons, no heavy borders */
.ab{
  position:absolute;right:10px;
  bottom:calc(var(--bnav-h) + 130px);
  z-index:10;
  display:flex;flex-direction:column;gap:18px;align-items:center;
}
.ai{display:flex;flex-direction:column;align-items:center;gap:4px}
.ao{
  width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  transition:transform .15s,background .15s;
}
.ao:active{transform:scale(.92);background:rgba(255,255,255,.15)}
.al{
  font-size:.52rem;font-weight:600;
  color:rgba(255,255,255,.75);
  letter-spacing:.3px;
}

/* ─── Bottom info panel ──────────────────────────────────────────────────── */
/* Extra bottom padding to clear the bottom nav */
.gi{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  padding:12px 14px calc(var(--bnav-h) + 72px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* Play button — centered, thumb-zone position */
.pb-wrap{
  position:absolute;
  left:0;right:0;
  bottom:38%;
  z-index:11;
  display:flex;justify-content:center;align-items:center;
  pointer-events:none;
}
.pb-wrap .pb{pointer-events:all}

/* Category badge — TikTok pill style */
.gct{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:999px;
  font-family:var(--fb);
  font-size:.52rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:7px;
  background:rgba(254,44,85,.14);
  border:1px solid rgba(254,44,85,.32);
  color:var(--tk-red);
  max-width:calc(100% - 74px);
}

/* Game name — Orbitron, bold, large */
.gn{
  font-family:var(--fd);
  font-size:clamp(1rem,4.5vw,1.38rem);
  font-weight:800;line-height:1.2;
  margin-bottom:5px;
  text-shadow:0 2px 16px rgba(0,0,0,.95);
  color:#fff;
}

/* Description */
.gd{
  font-family:var(--fb);
  font-size:clamp(.7rem,2.8vw,.84rem);
  color:rgba(255,255,255,.72);
  line-height:1.4;
  margin-bottom:10px;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  padding-right:68px;
}

/* Tags */
.gt{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;padding-right:68px}
.gtg{
  padding:2px 8px;border-radius:999px;
  font-family:var(--fb);
  font-size:.52rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.08);
}

/* Play button — centered, prominent, thumb-friendly */
.pb{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 44px;border-radius:999px;
  background:linear-gradient(135deg,var(--tk-red),#ee1d52);
  color:#fff;
  font-family:var(--fb);font-size:1rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 6px 28px rgba(254,44,85,.55),0 0 0 3px rgba(254,44,85,.15);
  transition:transform .15s,box-shadow .15s,opacity .15s;
  min-width:160px;
}
.pb:active{transform:scale(.96);box-shadow:0 2px 12px rgba(254,44,85,.3);opacity:.9}
.pb svg{width:18px;height:18px;flex-shrink:0}

/* ─── Category colour accents (badge only) ───────────────────────────────── */
.cat-adventure .gct{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.3);color:#00ff88}
.cat-racing    .gct{background:rgba(255,100,0,.12) ;border-color:rgba(255,100,0,.3);color:#ff6400}
.cat-action    .gct{background:rgba(254,44,85,.14) ;border-color:rgba(254,44,85,.32);color:var(--tk-red)}
.cat-arcade    .gct{background:rgba(160,0,255,.12) ;border-color:rgba(160,0,255,.3);color:#a000ff}
.cat-fun       .gct{background:rgba(255,252,0,.1)  ;border-color:rgba(255,252,0,.28);color:#fffc00}
.cat-puzzle    .gct{background:rgba(37,244,238,.1) ;border-color:rgba(37,244,238,.28);color:var(--tk-teal)}
.cat-sports    .gct{background:rgba(0,255,136,.12) ;border-color:rgba(0,255,136,.3);color:#00ff88}
.cat-casual    .gct{background:rgba(180,100,255,.12);border-color:rgba(180,100,255,.3);color:#b464ff}
.cat-strategy  .gct{background:rgba(255,165,0,.12) ;border-color:rgba(255,165,0,.3);color:#ffa500}
.cat-casino    .gct{background:rgba(255,215,0,.12) ;border-color:rgba(255,215,0,.3);color:#ffd700}

/* ─── Swipe hint ─────────────────────────────────────────────────────────── */
.ht{
  position:fixed;left:50%;
  bottom:calc(var(--bnav-h) + 14px);
  transform:translateX(-50%);
  z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  pointer-events:none;
  animation:tk-pulse 2s ease-in-out infinite;
}
.ht span{font-size:.5rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--tk-teal)}
.ht svg{width:20px;height:20px;color:var(--tk-teal)}
@keyframes tk-pulse{0%,100%{opacity:.7;transform:translateX(-50%) translateY(0)}
                    50%{opacity:.18;transform:translateX(-50%) translateY(-6px)}}

/* ─── Dot nav ────────────────────────────────────────────────────────────── */
.dts{
  position:fixed;right:6px;top:50%;
  transform:translateY(-50%);
  z-index:20;
  display:flex;flex-direction:column;gap:4px;
}
.dt{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.22);
  transition:all .25s;
}
.dt.on{
  background:var(--tk-red);
  height:14px;border-radius:2px;
  box-shadow:0 0 6px rgba(254,44,85,.5);
}

/* ─── Empty / error state ────────────────────────────────────────────────── */
.empty-feed{
  display:flex;align-items:center;justify-content:center;
  height:var(--vh);
  font-family:var(--fb);font-size:.95rem;color:rgba(255,255,255,.45);
  text-align:center;padding:20px;
}

/* ─── Viewport height (dvh > svh) ───────────────────────────────────────── */
@supports (height:100dvh){
  :root{--vh:100dvh}
}

/* ════════════════════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION BAR  (TikTok style)
   ════════════════════════════════════════════════════════════════════════════ */
.tk-bnav{
  position:fixed;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:var(--feed-max);
  height:calc(var(--bnav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;
  z-index:50;
}
.tk-bnav-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  color:rgba(255,255,255,.45);
  font-family:var(--fb);font-size:.5rem;font-weight:600;letter-spacing:.4px;
  padding:8px 0;
  transition:color .2s;
}
.tk-bnav-item.active{color:#fff}
.tk-bnav-item svg{transition:transform .15s}
.tk-bnav-item:active svg{transform:scale(.88)}

/* TikTok signature + button: white rect with teal shadow left, red shadow right */
.tk-bnav-plus-wrap{flex:1.1}
.tk-bnav-plus-btn{
  position:relative;
  width:44px;height:30px;
  display:flex;align-items:center;justify-content:center;
}
.tk-bnav-plus-btn::before{
  content:'';
  position:absolute;
  inset:0;left:-3px;
  width:44px;height:30px;
  border-radius:8px;
  background:var(--tk-teal);
  z-index:0;
}
.tk-bnav-plus-btn::after{
  content:'';
  position:absolute;
  inset:0;right:-3px;left:3px;
  width:44px;height:30px;
  border-radius:8px;
  background:var(--tk-red);
  z-index:0;
}
.tk-bnav-plus-inner{
  position:relative;z-index:1;
  width:44px;height:30px;
  border-radius:7px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:700;color:#000;
  line-height:1;
}

/* ════════════════════════════════════════════════════════════════════════════
   DRAWER (override SiteMenu.ascx inline styles for TikTok brand)
   ════════════════════════════════════════════════════════════════════════════ */
.sd-nav{
  background:var(--tk-dark)!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
}
.sd-link.active{color:var(--tk-red)!important}
.sd-lang{color:var(--tk-teal)!important}
.sd-foot a:hover{color:var(--tk-teal)!important}

/* ─── Skeleton loader ────────────────────────────────────────────────────── */
.sk-slide{
  width:100%;height:var(--vh);
  background:#0a0a0a;
  position:relative;overflow:hidden;
  scroll-snap-align:start;
}
.sk-shine{
  position:absolute;inset:0;
  background:linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.03) 50%,
    transparent 65%
  );
  background-size:200% 100%;
  animation:sk-sweep 1.8s linear infinite;
}
@keyframes sk-sweep{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── Overlay (feed drawer) ──────────────────────────────────────────────── */
.fd-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.75);
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.fd-overlay.open{opacity:1;pointer-events:all}

/* ─── Feed drawer ────────────────────────────────────────────────────────── */
.fd-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:272px;max-width:82vw;z-index:201;
  background:var(--tk-dark);
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:4px 0 32px rgba(0,0,0,.7);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
}
.fd-drawer.open{transform:translateX(0)}
.fd-drawer-head{
  padding:16px 14px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.fd-drawer-body{padding:8px 0;flex:1}
.fd-drawer-link{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  color:rgba(255,255,255,.5);
  font-family:var(--fb);font-size:.88rem;font-weight:600;letter-spacing:.2px;
  transition:color .2s,background .2s;
}
.fd-drawer-link:hover,.fd-drawer-link.active{color:#fff;background:rgba(255,255,255,.04)}
.fd-drawer-link.active{color:var(--tk-red)}
.fd-drawer-link svg{flex-shrink:0}
.fd-cat-sub{padding:0 0 4px 48px;display:none}
.fd-cat-sub.open{display:block}
.fd-cat-sub a{
  display:block;padding:9px 16px 9px 0;
  color:rgba(255,255,255,.45);font-family:var(--fb);font-size:.8rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:color .15s;
}
.fd-cat-sub a:last-child{border-bottom:0}
.fd-cat-sub a:hover{color:var(--tk-teal)}
.fd-drawer-foot{
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:14px;font-size:.68rem;flex-wrap:wrap;
}
.fd-drawer-foot a{color:rgba(255,255,255,.4);transition:color .15s;font-family:var(--fb)}
.fd-drawer-foot a:hover{color:var(--tk-teal)}
.fd-lang-btn{border-top:1px solid rgba(255,255,255,.07);margin-top:4px;padding-top:14px}
.fd-lang-badge{
  margin-left:auto;padding:2px 7px;border-radius:999px;
  font-size:.6rem;font-weight:700;letter-spacing:1px;
  background:rgba(37,244,238,.15);border:1px solid rgba(37,244,238,.3);
  color:var(--tk-teal);font-family:var(--fm);
}

/* ─── Desktop layout ─────────────────────────────────────────────────────── */
@media (min-width:520px){
  :root{--feed-max:420px}
  .cnt{right:calc(50% - 210px + 12px)}
  .dts{right:calc(50% - 210px - 14px)}
}
@media (min-width:900px){
  :root{--feed-max:400px}
  .cnt{right:calc(50% - 200px + 12px)}
  .dts{right:calc(50% - 200px - 14px)}
  .gn{font-size:1.28rem}
}

/* ─── Small mobile ───────────────────────────────────────────────────────── */
@media (max-width:360px){
  .cts button{font-size:.65rem;padding:5px 9px 7px}
  .gn{font-size:.92rem}
  .pb{padding:9px 18px;font-size:.65rem}
  .tk-bnav-item{font-size:.46rem}
}

/* ─── Search overlay ─────────────────────────────────────────────────────── */
.fd-search-ov{
  position:fixed;inset:0;z-index:300;
  background:var(--tk-black);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.fd-search-ov.open{transform:translateY(0)}
.fd-search-head{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--tk-sep);
  flex-shrink:0;
}
.fd-search-inp{
  flex:1;height:38px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  padding:0 36px 0 12px;
  color:#fff;font-size:.92rem;font-family:var(--fb);
  outline:none;
}
.fd-search-inp::placeholder{color:rgba(255,255,255,.35)}
.fd-search-inp:focus{border-color:var(--tk-teal)}
.fd-search-clr{
  display:none;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);
  flex-shrink:0;
}
.fd-search-res{
  flex:1;overflow-y:auto;padding:8px 0;
}
.fd-search-card{
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;
  color:#fff;text-decoration:none;
  transition:background .15s;
}
.fd-search-card:hover,.fd-search-card:active{background:rgba(255,255,255,.05)}
.fd-search-card img{
  width:52px;height:52px;border-radius:10px;
  object-fit:cover;flex-shrink:0;
  background:rgba(255,255,255,.08);
}
.fd-search-info{flex:1;min-width:0}
.fd-search-name{
  font-size:.88rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fd-search-cat{
  font-size:.74rem;color:var(--tk-dim);margin-top:2px;
}
.fd-search-arrow{color:rgba(255,255,255,.3);flex-shrink:0}
.fd-search-hint,.fd-search-empty{
  padding:40px 20px;text-align:center;
  color:rgba(255,255,255,.38);font-size:.88rem;
}