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

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root{
  --cyan:#00f0ff;--mag:#ff2daa;--yel:#ffe136;
  --bg:#0a0a12;--card:#12121f;--txt:#f0f0ff;--dim:#9aa0b3;
  --fd:'Orbitron',sans-serif;
  --fb:'Poppins',sans-serif;
  --fm:'Space Mono',monospace;
  --vh:100svh;
  --feed-max:480px;   /* desktop: cap the feed column width */
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
body{
  color:var(--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}

/* ─── App shell ──────────────────────────────────────────────────────────── */
#app{
  position:fixed;inset:0;
  height:var(--vh);
  overflow:hidden;
  background:#000;
  isolation:isolate;
  /* desktop: centre the feed column */
  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;align-items:center;gap:6px;
  padding:10px 10px 20px;
  background:linear-gradient(180deg,rgba(10,10,18,.96) 52%,rgba(10,10,18,0) 100%);
}
.bk{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.cts{display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:1;min-width:0}
.cts::-webkit-scrollbar{display:none}
.cts button{
  padding:6px 11px;border-radius:999px;
  font-size:.62rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;white-space:nowrap;color:var(--dim);
  transition:background .2s,color .2s;
}
.cts button.on{background:rgba(255,255,255,.12);color:#fff}

/* ─── Slide counter ──────────────────────────────────────────────────────── */
.cnt{
  position:fixed;top:52px;
  right:calc(50% - var(--feed-max)/2 + 12px);
  z-index:52;
  font-family:var(--fm);font-size:.7rem;color:var(--dim);
}
.cnt b{color:var(--cyan);font-size:.82rem}

/* ─── 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;
}

/*
  Blurred background layer — same image, blurred + darkened.
  Fills every pixel; visible in the small gaps cover-fit leaves on ultra-wide screens.
*/
.img-bg{
  position:absolute;
  inset:-60px;
  background-size:cover;
  background-position:center 20%;
  background-repeat:no-repeat;
  filter:blur(48px) brightness(0.15) saturate(2);
  transform:scale(1.12);
  z-index:0;
}

/*
  Foreground image — object-fit:cover fills the full slide (no empty space).
  object-position: center 20% keeps the game title / logo in frame.
  ~12% is cropped from each side on a 390px phone — acceptable for centred art.
*/
.media-layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
  z-index:1;
}

/* Video preview — same cover behaviour */
.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 ───────────────────────────────────────────────────── */
.grd{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(10,10,18,.40)  0%,
    rgba(10,10,18,0)   22%,
    rgba(10,10,18,0)   56%,
    rgba(10,10,18,.62) 78%,
    rgba(10,10,18,.94) 100%
  );
}

/* ─── Right action bar ───────────────────────────────────────────────────── */
.ab{
  position:absolute;right:10px;bottom:190px;z-index:10;
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.ai{display:flex;flex-direction:column;align-items:center;gap:3px}
.ao{
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.42);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);
}
.al{font-size:.55rem;font-weight:600;opacity:.85}

/* ─── Bottom info panel ──────────────────────────────────────────────────── */
.gi{
  position:absolute;left:50%;bottom:calc(54px + env(safe-area-inset-bottom,0px));z-index:10;
  transform:translateX(-50%);
  width:min(calc(100% - 28px), 320px);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.gct{
  display:inline-block;padding:3px 9px;border-radius:5px;
  font-size:.55rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:6px;
  background:rgba(0,240,255,.12);border:1px solid rgba(0,240,255,.22);
}
.gn{
  font-family:var(--fd);
  font-size:clamp(1rem,4.5vw,1.4rem);
  font-weight:800;line-height:1.18;
  margin-bottom:5px;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.gd{
  font-size:clamp(.72rem,2.8vw,.86rem);
  color:rgba(255,255,255,.78);
  line-height:1.35;
  margin-bottom:10px;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.gt{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}
.gtg{
  padding:2px 7px;border-radius:999px;
  font-size:.55rem;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.84);
}
.pb{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  background:linear-gradient(135deg,var(--cyan),#00c8ff);
  color:#000;
  font-family:var(--fd);font-size:clamp(.68rem,2.5vw,.82rem);font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  box-shadow:0 0 24px rgba(0,240,255,.28);
  text-decoration:none;
  transition:transform .15s,box-shadow .15s;
  position:static;
  margin-top:14px;
  white-space:nowrap;
}
.pb:active{transform:scale(.97);box-shadow:0 0 12px rgba(0,240,255,.18)}
.pb svg{width:16px;height:16px;flex-shrink:0}

/* ─── Category colour accents ────────────────────────────────────────────── */
.cat-adventure .gct{background:rgba(0,255,136,.12);border-color:rgba(0,255,136,.25)}
.cat-racing    .gct{background:rgba(255,100,0,.12) ;border-color:rgba(255,100,0,.25)}
.cat-action    .gct{background:rgba(255,45,45,.12) ;border-color:rgba(255,45,45,.25)}
.cat-arcade    .gct{background:rgba(160,0,255,.12) ;border-color:rgba(160,0,255,.25)}
.cat-fun       .gct{background:rgba(255,225,54,.12);border-color:rgba(255,225,54,.25)}
.cat-puzzle    .gct{background:rgba(0,240,255,.12) ;border-color:rgba(0,240,255,.25)}
.cat-sports    .gct{background:rgba(0,255,136,.12) ;border-color:rgba(0,255,136,.25)}
.cat-casual    .gct{background:rgba(180,100,255,.12);border-color:rgba(180,100,255,.25)}
.cat-strategy  .gct{background:rgba(255,165,0,.12) ;border-color:rgba(255,165,0,.25)}
.cat-casino    .gct{background:rgba(255,215,0,.12) ;border-color:rgba(255,215,0,.25)}

/* ─── Swipe hint ─────────────────────────────────────────────────────────── */
.ht{
  position:fixed;left:50%;bottom:10px;
  transform:translateX(-50%);
  z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  pointer-events:none;
  animation:pulse 2s ease-in-out infinite;
}
.ht span{font-size:.55rem;letter-spacing:2px;text-transform:uppercase;color:var(--dim)}
.ht svg{width:22px;height:22px}
@keyframes pulse{0%,100%{opacity:.65}50%{opacity:.15}}

/* ─── 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(--cyan);height:14px;border-radius:2px;box-shadow:0 0 6px rgba(0,240,255,.4)}

/* ─── Empty state ────────────────────────────────────────────────────────── */
.empty-feed{
  display:flex;align-items:center;justify-content:center;
  height:var(--vh);
  font-family:var(--fd);font-size:1rem;color:var(--dim);
  text-align:center;padding:20px;
}

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

/* ─── Desktop layout ─────────────────────────────────────────────────────── */
/*
  On wide screens the feed column is centred and capped at --feed-max.
  The counter and dots track the column edges.
*/
@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.3rem}
}

/* ─── Small mobile ───────────────────────────────────────────────────────── */
@media (max-width:360px){
  .cts button{font-size:11px;padding:5px 9px}
  .gn{font-size:.95rem}
  .pb{padding:9px 16px;font-size:.65rem}
}

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

/* ─── Feed page slide-in drawer ─────────────────────────────────────────── */
.fd-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:272px;max-width:82vw;z-index:201;
  background:var(--card);
  border-right:1px solid rgba(0,240,255,.12);
  box-shadow:4px 0 32px rgba(0,0,0,.6);
  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:var(--dim);
  font-family:var(--fb);font-size:.88rem;font-weight:600;letter-spacing:.3px;
  transition:color .2s,background .2s;
  text-decoration:none;
}
.fd-drawer-link:hover,.fd-drawer-link.active{
  color:var(--txt);background:rgba(255,255,255,.04)
}
.fd-drawer-link.active{color:var(--cyan)}
.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:var(--dim);font-family:var(--fb);font-size:.8rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.04);
  text-decoration:none;transition:color .15s;
}
.fd-cat-sub a:last-child{border-bottom:0}
.fd-cat-sub a:hover{color:var(--cyan)}

.fd-drawer-foot{
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:14px;font-size:.68rem;
}
.fd-drawer-foot a{
  color:var(--dim);text-decoration:none;transition:color .15s;
  font-family:var(--fb);
}
.fd-drawer-foot a:hover{color:var(--cyan)}

/* ─── Feed drawer language button ────────────────────────────────────────── */
.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(0,240,255,.15);border:1px solid rgba(0,240,255,.3);
  color:var(--cyan);font-family:var(--fm);
}

/* ─── Top-bar language button (navbar) ───────────────────────────────────── */
.fd-lang-nav{
  display:flex;align-items:center;gap:4px;
  padding:5px 9px;border-radius:999px;
  background:rgba(0,240,255,.1);border:1px solid rgba(0,240,255,.28);
  color:var(--cyan);font-size:.58rem;font-weight:700;letter-spacing:1px;
  text-decoration:none;flex-shrink:0;font-family:var(--fm);
  transition:background .2s;
}
.fd-lang-nav:active{background:rgba(0,240,255,.2)}

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