/* ═══════════════════════════════════════════════════════════
   ANIMANIA.UZ — main.css
   Dizayn: Qizil + Oltin, Donghua / Anime dark aesthetic
═══════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden;min-height:100vh}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font-family:inherit}ul,ol{list-style:none}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--acc);border-radius:4px}

/* ── ROOT VARIABLES ─────────────────────────────────────── */
:root{
  --bg:      #0d0000;
  --bg2:     #160000;
  --bg3:     #1e0000;
  --bg4:     #280000;
  --acc:     #c0392b;
  --acc2:    #96170b;
  --acc3:    #e74c3c;
  --acc4:    #ff6b6b;
  --gold:    var(--acc3);
  --gold2:   #fff;
  --gold3:   #8a0000;
  --green:   #27ae60;
  --red:     #e74c3c;
  --blue:    #2980b9;
  --txt:     #f5e6e6;
  --txt2:    #c9a0a0;
  --txt3:    #7a4040;
  --white:   #ffffff;
  --r:       10px;
  --rr:      16px;
  --rrr:     22px;
  --topbar:  62px;
  --bnav:    70px;

  --g-acc:   linear-gradient(135deg, #c0392b, #7B0F0A);
  --g-gold:  linear-gradient(135deg, var(--acc3), #8a0000);
  --g-warm:  linear-gradient(135deg, #e74c3c, #c0392b);
  --g-logo:  linear-gradient(160deg, #8B0000 0%, #1a0000 100%);
}

/* ── KEYFRAMES ──────────────────────────────────────────── */
@keyframes fadeUp    {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fadeDown  {from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fadeIn    {from{opacity:0}to{opacity:1}}
@keyframes shimmer   {0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulse     {0%,100%{opacity:1}50%{opacity:.4}}
@keyframes float     {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spin      {to{transform:rotate(360deg)}}
@keyframes gradFlow  {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes borderGlow{0%,100%{box-shadow:0 0 0 1px rgba(192,57,43,.2)}50%{box-shadow:0 0 0 2px rgba(192,57,43,.6),0 0 20px rgba(192,57,43,.15)}}
@keyframes goldPulse {0%,100%{box-shadow:0 0 8px rgba(192,57,43,.3)}50%{box-shadow:0 0 20px rgba(192,57,43,.7)}}
@keyframes notifPop  {0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes rippleOut {0%{transform:scale(0);opacity:.6}100%{transform:scale(4.5);opacity:0}}
@keyframes scanLine  {0%{top:-40px}100%{top:calc(100% + 40px)}}

/* ── AMBIENT BACKGROUND ─────────────────────────────────── */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 10%  5%,  rgba(192,57,43,.18) 0%,transparent 60%),
    radial-gradient(ellipse 50% 35% at 90%  15%, rgba(139,0,0,.14)   0%,transparent 55%),
    radial-gradient(ellipse 70% 50% at 50%  95%, rgba(192,57,43,.06) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 85%  75%, rgba(192,57,43,.07) 0%,transparent 50%);
  animation:gradFlow 16s ease-in-out infinite;background-size:200% 200%;
}
body::after{
  content:'';position:fixed;left:0;right:0;height:80px;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,transparent,rgba(192,57,43,.018),transparent);
  animation:scanLine 12s linear infinite;
}

#leafCanvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.5}

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--topbar);
  display:flex;align-items:center;gap:12px;
  padding:0 clamp(12px,4vw,28px);
  background:rgba(13,0,0,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(192,57,43,.2);
  animation:fadeDown .5s ease;
  transition:transform .3s ease;
}
.topbar::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--acc3),transparent);
  opacity:.5;
}

/* Hamburger */
.tb-hamburger{display:none;flex-direction:column;gap:4.5px;padding:5px;background:none;border:none;cursor:pointer;flex-shrink:0}
.tb-hamburger span{width:22px;height:2px;border-radius:2px;background:var(--txt2);display:block;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s,background .2s}
.tb-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.tb-hamburger.open span:nth-child(2){opacity:0}
.tb-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Logo */
.tb-logo{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  font-family:'Syne',sans-serif;font-size:clamp(15px,3vw,20px);font-weight:800;
  color:var(--white);letter-spacing:.02em;
}
.tb-logo-icon{display:none}
.tb-logo-text{display:none}
.tb-logo-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--g-logo);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 0 18px rgba(192,57,43,.5);
  border:1px solid rgba(192,57,43,.3);
}
.tb-logo-icon svg{width:24px;height:24px}
.tb-logo-text em{color:var(--acc3);font-style:normal}

/* Desktop nav */
.tb-nav{display:flex;align-items:center;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
.tb-nav::-webkit-scrollbar{display:none}
.tb-link{padding:6px 13px;border-radius:50px;white-space:nowrap;font-size:13px;font-weight:600;color:var(--txt2);transition:color .2s,background .2s}
.tb-link:hover,.tb-link.on{color:var(--white);background:rgba(192,57,43,.15)}

/* Right actions */
.tb-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-srch-btn,.tb-icon-btn{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:rgba(192,57,43,.1);border:1.5px solid rgba(192,57,43,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--acc3);font-size:15px;
  transition:background .2s,border-color .2s,transform .15s;
}
.tb-srch-btn:hover,.tb-icon-btn:hover{background:rgba(192,57,43,.22);border-color:rgba(192,57,43,.4)}
.tb-srch-btn:active,.tb-icon-btn:active{transform:scale(.88)}
.tb-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--acc3);position:relative;flex-shrink:0;box-shadow:0 0 12px rgba(192,57,43,.35);transition:transform .2s}
.tb-avatar:hover{transform:scale(1.08)}
.tb-avatar img{width:100%;height:100%;object-fit:cover}
.av-prem-ring{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(var(--acc3),var(--acc3),#fff,var(--acc3));z-index:-1;animation:spin 3s linear infinite}
.tb-btn-login{padding:6px 16px;border-radius:50px;background:rgba(192,57,43,.1);border:1.5px solid rgba(192,57,43,.35);color:var(--acc3);font-size:12px;font-weight:700;transition:.2s}
.tb-btn-login:hover{background:rgba(192,57,43,.22)}
.tb-btn-reg{padding:6px 16px;border-radius:50px;background:var(--g-gold);color:#1a0000;font-size:12px;font-weight:800;box-shadow:0 3px 14px rgba(192,57,43,.4);transition:.2s}
.tb-btn-reg:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(192,57,43,.55)}

/* ══════════════════════════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════════════════════════ */
.srch-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);display:none;align-items:flex-start;justify-content:center;padding-top:clamp(80px,15vh,140px);animation:fadeIn .2s ease}
.srch-overlay.open{display:flex}
.srch-box{width:min(620px,92vw);background:rgba(22,0,0,.97);border:1.5px solid rgba(192,57,43,.3);border-radius:var(--rrr);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.8);animation:fadeUp .25s ease;position:relative}
.srch-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:8px;background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.2);display:flex;align-items:center;justify-content:center;color:var(--txt2);font-size:14px;transition:.2s}
.srch-close:hover{background:rgba(192,57,43,.22);color:#fff}
.srch-inner{display:flex;align-items:center;gap:12px;padding:16px 20px;position:relative}
.srch-ico{color:var(--acc3);font-size:16px;flex-shrink:0}
#srchInput{flex:1;background:none;border:none;outline:none;font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:600;color:var(--txt);caret-color:var(--acc3)}
#srchInput::placeholder{color:var(--txt3)}
.srch-results{max-height:380px;overflow-y:auto;border-top:1px solid rgba(192,57,43,.12)}
.srch-item{display:flex;align-items:center;gap:12px;padding:10px 20px;transition:background .2s;cursor:pointer}
.srch-item:hover{background:rgba(192,57,43,.08)}
.srch-item img{width:36px;height:52px;border-radius:6px;object-fit:cover;flex-shrink:0}
.srch-item-info{flex:1;min-width:0}
.srch-item-title{font-size:13px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-item-meta{font-size:11px;color:var(--txt3);margin-top:2px}
.srch-empty{padding:24px;text-align:center;color:var(--txt3);font-size:14px}
.srch-loading{padding:20px;text-align:center;color:var(--txt2)}

/* ══════════════════════════════════════════════════════════
   SIDE DRAWER
══════════════════════════════════════════════════════════ */
.mob-ovr{position:fixed;inset:0;z-index:1099;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);display:none}
.mob-ovr.show{display:block;animation:fadeIn .22s ease}
.drawer{position:fixed;top:0;left:-290px;width:282px;height:100%;z-index:1100;background:rgba(13,0,0,.98);backdrop-filter:blur(28px);border-right:1px solid rgba(192,57,43,.2);display:flex;flex-direction:column;overflow-y:auto;transition:left .36s cubic-bezier(.4,0,.2,1);box-shadow:8px 0 40px rgba(0,0,0,.8)}
.drawer.open{left:0}
.drawer-logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid rgba(192,57,43,.15);font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:var(--white)}
.logo-ico{width:32px;height:32px;border-radius:8px;background:var(--g-logo);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px rgba(192,57,43,.4);border:1px solid rgba(192,57,43,.25);overflow:hidden}
.logo-ico svg{width:20px;height:20px}
.drawer-close{margin-left:auto;width:28px;height:28px;border-radius:7px;background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.2);display:flex;align-items:center;justify-content:center;color:var(--txt2);font-size:13px;transition:.2s}
.drawer-close:hover{background:rgba(192,57,43,.22);color:#fff}
.drawer-nav{padding:8px 10px;flex:1;display:flex;flex-direction:column;gap:2px}
.dr-link{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:11px;border:1.5px solid transparent;font-size:13px;font-weight:600;color:var(--txt2);transition:background .18s,color .18s,border-color .18s,padding-left .18s}
.dr-link i{width:18px;text-align:center;font-size:14px;color:var(--txt3);transition:color .2s,transform .2s}
.dr-link:hover{background:rgba(192,57,43,.1);border-color:rgba(192,57,43,.2);color:var(--white);padding-left:17px}
.dr-link:hover i{color:var(--acc3);transform:scale(1.12)}
.dr-link.accent{color:var(--acc3)}.dr-link.accent i{color:var(--acc3)}
.dr-link.danger{color:#f87171}.dr-link.danger i{color:#f87171}
.dr-link.danger:hover{background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.2)}
.dr-sep{height:1px;background:rgba(192,57,43,.1);margin:5px 0}

/* ══════════════════════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════════════════════ */
.page-wrap{padding-top:var(--topbar);padding-bottom:clamp(20px,4vw,40px);position:relative;z-index:5}
body.has-bnav .page-wrap{padding-bottom:calc(var(--bnav) + 20px)}
.container{max-width:1380px;margin:0 auto;padding:0 clamp(10px,3vw,24px)}

/* ══════════════════════════════════════════════════════════
   HERO SLIDER
══════════════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;height:clamp(230px,52vw,540px);background:var(--bg2);margin-top:0}
.hero-track{display:flex;height:100%;transition:transform .78s cubic-bezier(.4,0,.2,1);will-change:transform}
.hero-slide{min-width:100%;height:100%;position:relative;overflow:hidden;flex-shrink:0;display:block}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 11s ease;filter:brightness(.8)}
.hero-slide.on img{transform:scale(1.06)}
.hero-slide::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(0deg,  rgba(13,0,0,1) 0%,rgba(13,0,0,.75) 32%,rgba(13,0,0,.1) 65%,transparent 100%),
    linear-gradient(90deg, rgba(13,0,0,.7) 0%,transparent 55%);
}
.hero-info{position:absolute;bottom:0;left:0;z-index:3;padding:clamp(14px,4vw,38px);max-width:min(580px,88%)}
.hero-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.h-tag{padding:3px 10px;border-radius:20px;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.h-tag.type{background:rgba(192,57,43,.22);border:1px solid rgba(192,57,43,.45);color:var(--acc3)}
.h-tag.ep  {background:rgba(192,57,43,.1);border:1px solid rgba(192,57,43,.35);color:var(--acc3)}
.h-tag.new {background:rgba(231,76,60,.15); border:1px solid rgba(231,76,60,.4);  color:var(--acc4)}
.h-tag.prem{background:rgba(192,57,43,.15);border:1px solid rgba(192,57,43,.4);color:#fff}
.hero-score{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--acc3)}
.hero-title{font-family:'Syne',sans-serif;font-size:clamp(17px,4.5vw,34px);font-weight:800;color:#fff;line-height:1.18;margin-bottom:8px;text-shadow:0 2px 22px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-desc{font-size:clamp(11px,1.8vw,13px);color:rgba(245,230,230,.6);line-height:1.65;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.hbtn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:50px;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;border:none;transition:transform .2s,box-shadow .2s}
.hbtn:active{transform:scale(.91)!important}
.hbtn.watch{background:var(--g-acc);color:#fff;box-shadow:0 4px 20px rgba(192,57,43,.45)}
.hbtn.watch::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);transition:left .5s}
.hbtn.watch:hover{transform:translateY(-2px);box-shadow:0 7px 28px rgba(192,57,43,.6)}
.hbtn.watch:hover::before{left:150%}
.hbtn.info{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}
.hbtn.info:hover{background:rgba(255,255,255,.18)}
.hero-dots{position:absolute;bottom:12px;right:14px;z-index:4;display:flex;gap:5px;align-items:center}
.hdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.35s;border:none;outline:none}
.hdot.on{width:20px;border-radius:3px;background:var(--acc3);box-shadow:0 0 9px rgba(192,57,43,.7)}
.hero-prog{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(192,57,43,.12);z-index:5}
.hero-prog-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc3));width:0%;transition:width .1s linear;box-shadow:0 0 6px rgba(192,57,43,.6)}
.hero-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:50%;background:rgba(13,0,0,.7);border:1.5px solid rgba(192,57,43,.3);display:flex;align-items:center;justify-content:center;color:var(--acc3);font-size:13px;cursor:pointer;backdrop-filter:blur(8px);transition:.2s}
.hero-arr:hover{background:rgba(192,57,43,.3);border-color:rgba(192,57,43,.6)}
.hero-arr.prev{left:12px}.hero-arr.next{right:12px}

/* ══════════════════════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════════════════════ */
.sec{padding:clamp(22px,3.5vw,36px) 0 0}
.sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:0 0 13px}
.sec-title{font-family:'Syne',sans-serif;font-size:clamp(14px,3vw,18px);font-weight:800;color:var(--white);display:flex;align-items:center;gap:9px}
.sec-title::before{content:'';width:4px;height:18px;border-radius:2px;flex-shrink:0;background:var(--g-gold);box-shadow:0 0 8px rgba(192,57,43,.55)}
.sec-more{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;color:var(--acc3);border:1px solid rgba(192,57,43,.25);background:rgba(192,57,43,.07);transition:.2s}
.sec-more:hover{background:rgba(192,57,43,.15);border-color:rgba(192,57,43,.5)}
.sec-more i{font-size:9px;transition:transform .2s}
.sec-more:hover i{transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════
   ANIME CARD
══════════════════════════════════════════════════════════ */
.anime-grid-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.anime-grid-scroll::-webkit-scrollbar{display:none}
.anime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,22vw,155px),1fr));gap:12px}
.acard{flex-shrink:0;scroll-snap-align:start;width:clamp(110px,23vw,155px);display:flex;flex-direction:column;gap:7px;cursor:pointer;opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
.anime-grid .acard{width:100%}
.acard.vis{opacity:1;transform:none}
.acard-thumb{width:100%;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;position:relative;border:1.5px solid rgba(192,57,43,.2);background:var(--bg2);transition:border-color .3s,box-shadow .3s,transform .3s}
.acard-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .42s cubic-bezier(.4,0,.2,1)}
.acard:hover .acard-thumb{border-color:rgba(192,57,43,.55);box-shadow:0 8px 28px rgba(0,0,0,.7),0 0 18px rgba(192,57,43,.25);transform:translateY(-4px)}
.acard:hover .acard-thumb img{transform:scale(1.09)}
.acard:active .acard-thumb{transform:scale(.93)!important}
.acard-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(192,57,43,.12) 0%,transparent 55%);opacity:0;transition:.3s}
.acard:hover .acard-thumb::after{opacity:1}
.acard-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:42px;height:42px;border-radius:50%;background:rgba(192,57,43,.9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;z-index:2;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .28s;opacity:0;box-shadow:0 0 22px rgba(192,57,43,.6)}
.acard:hover .acard-play{transform:translate(-50%,-50%) scale(1);opacity:1}
.acard-rating{position:absolute;top:6px;left:6px;z-index:3;padding:2px 8px;border-radius:7px;font-family:'Syne',sans-serif;font-size:10px;font-weight:800;color:#fff;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1)}
.acard-new{position:absolute;top:6px;right:6px;z-index:3;background:var(--g-warm);color:#fff;font-size:8px;font-weight:900;padding:2px 6px;border-radius:5px;letter-spacing:.04em}
.acard-ep{position:absolute;bottom:6px;right:6px;z-index:3;background:rgba(13,0,0,.85);border:1px solid rgba(192,57,43,.25);color:var(--acc3);font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;backdrop-filter:blur(5px)}
.acard-dubbed{position:absolute;bottom:6px;left:6px;z-index:3;background:rgba(39,174,96,.15);border:1px solid rgba(39,174,96,.35);color:var(--green);font-size:8px;font-weight:800;padding:2px 5px;border-radius:5px}
.acard-title{font-size:clamp(10px,2.2vw,12px);font-weight:700;color:var(--txt);text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;transition:color .2s}
.acard:hover .acard-title{color:var(--acc3)}

/* ══════════════════════════════════════════════════════════
   GENRE GRID
══════════════════════════════════════════════════════════ */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,22vw,165px),1fr));gap:10px}
.g-card{aspect-ratio:16/7;border-radius:var(--rr);overflow:hidden;position:relative;cursor:pointer;border:1.5px solid rgba(192,57,43,.2);transition:border-color .3s,transform .3s,box-shadow .3s;opacity:0;transform:scale(.95)}
.g-card.vis{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease,border-color .3s,box-shadow .3s}
.g-card img{width:100%;height:100%;object-fit:cover;transition:transform .42s;filter:brightness(.45) saturate(.7)}
.g-card:hover img{transform:scale(1.12);filter:brightness(.6) saturate(1)}
.g-card:hover{border-color:rgba(192,57,43,.55);box-shadow:0 6px 22px rgba(0,0,0,.6);transform:translateY(-2px)}
.g-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-size:clamp(11px,2.5vw,14px);font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);letter-spacing:.04em;background:linear-gradient(135deg,rgba(192,57,43,.2),rgba(192,57,43,.1));transition:background .3s}
.g-card:hover .g-name{background:linear-gradient(135deg,rgba(192,57,43,.38),rgba(192,57,43,.22))}

/* ══════════════════════════════════════════════════════════
   COMMENTS
══════════════════════════════════════════════════════════ */
.comments-row{display:flex;gap:12px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.comments-row::-webkit-scrollbar{display:none}
.cm-card{flex-shrink:0;width:clamp(220px,60vw,290px);background:rgba(22,0,0,.88);border:1.5px solid rgba(192,57,43,.18);border-radius:var(--rr);padding:13px 14px;cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s}
.cm-card:hover{border-color:rgba(192,57,43,.45);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.55)}
.cm-header{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.cm-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(192,57,43,.3);flex-shrink:0}
.cm-avatar img{width:100%;height:100%;object-fit:cover}
.cm-uname{font-size:12px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:4px}
.cm-prem{font-size:8px;background:var(--g-gold);color:#1a0000;padding:1px 5px;border-radius:4px;font-weight:900}
.cm-date{font-size:10px;color:var(--txt3);margin-top:1px}
.cm-anime-banner{width:100%;aspect-ratio:16/6;border-radius:8px;overflow:hidden;margin-bottom:8px}
.cm-anime-banner img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.cm-text{font-size:12px;color:var(--txt2);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm-anime-name{font-size:10px;color:var(--acc3);font-weight:700;margin-top:5px;display:flex;align-items:center;gap:4px}

/* ══════════════════════════════════════════════════════════
   POST CARD
══════════════════════════════════════════════════════════ */
.post-card{background:rgba(22,0,0,.92);border:1.5px solid rgba(192,57,43,.2);border-radius:var(--rrr);overflow:hidden;animation:borderGlow 4s infinite}
.post-banner{width:100%;aspect-ratio:16/7;overflow:hidden}
.post-banner img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-banner img{transform:scale(1.03)}
.post-body{padding:16px 18px}
.post-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.post-profile{display:flex;align-items:center;gap:10px}
.post-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--acc3)}
.post-avatar img{width:100%;height:100%;object-fit:cover}
.post-uname{font-size:13px;font-weight:700;color:var(--txt);display:flex;align-items:center;gap:4px}
.post-verified{color:var(--acc3);font-size:13px}
.post-subs{font-size:11px;color:var(--txt3)}
.post-date{font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:4px;margin-left:auto}
.post-views{font-size:11px;color:var(--txt3);display:flex;align-items:center;gap:4px}
.post-text{font-size:13px;color:var(--txt2);line-height:1.7;margin-bottom:14px}
.post-reactions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.reaction-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:50px;background:rgba(192,57,43,.08);border:1.5px solid rgba(192,57,43,.2);color:var(--txt2);font-size:12px;font-weight:700;cursor:pointer;transition:.2s;position:relative;overflow:hidden}
.reaction-btn:hover{background:rgba(192,57,43,.18);border-color:rgba(192,57,43,.4);color:#fff}
.reaction-btn.active{background:rgba(192,57,43,.22);border-color:var(--acc3);color:var(--acc3)}
.reaction-btn i{font-size:14px}
.r-like.active{border-color:#60a5fa;color:#60a5fa;background:rgba(96,165,250,.12)}
.r-love.active{border-color:#f43f5e;color:#f43f5e;background:rgba(244,63,94,.1)}
.r-fire.active{border-color:#f97316;color:#f97316;background:rgba(249,115,22,.1)}
.r-ok.active  {border-color:var(--green);color:var(--green);background:rgba(39,174,96,.1)}

/* ══════════════════════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════════════════════ */
.bnav{display:none;position:fixed;bottom:10px;left:10px;right:10px;z-index:800}
.bnav-wrap{background:rgba(13,0,0,.97);backdrop-filter:blur(16px);border:1.5px solid rgba(192,57,43,.2);border-radius:50px;height:62px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(192,57,43,.04)}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--txt3);width:52px;height:48px;border-radius:40px;cursor:pointer;transition:.22s;position:relative;text-decoration:none}
.bn-item i{font-size:20px;transition:.28s cubic-bezier(.34,1.56,.64,1)}
.bn-item span{font-family:'Syne',sans-serif;font-size:8px;font-weight:700;letter-spacing:.03em;opacity:0;transition:.22s}
.bn-item.on{color:var(--acc3)}.bn-item.on i{transform:translateY(-1px) scale(1.1)}.bn-item.on span{opacity:1}
.bn-item.on::before{content:'';position:absolute;inset:0;border-radius:40px;background:radial-gradient(circle,rgba(192,57,43,.14) 0%,transparent 70%)}
.bn-item:hover:not(.on){color:rgba(192,57,43,.6)}
.bn-item:active i{transform:scale(.82)!important}
.bn-center{background:var(--g-acc);color:#fff!important;border-radius:50%;width:48px!important;height:48px!important;box-shadow:0 4px 18px rgba(192,57,43,.5);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s!important}
.bn-center i{color:#fff!important;font-size:19px!important}
.bn-center:hover{transform:scale(1.12)!important;box-shadow:0 6px 26px rgba(192,57,43,.65)!important}
.bn-center:active{transform:scale(.87)!important}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer{position:relative;z-index:5;margin-top:clamp(36px,6vw,64px);border-top:1px solid rgba(192,57,43,.15);background:rgba(13,0,0,.97)}
.footer-container{max-width:1380px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}
.footer-top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:28px;padding:clamp(26px,4vw,48px) 0}
.footer-logo{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:var(--white);display:flex;align-items:center;gap:9px;margin-bottom:10px}
.fl-icon{width:32px;height:32px;border-radius:8px;background:var(--g-logo);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid rgba(192,57,43,.2)}
.fl-icon svg{width:20px;height:20px}
.footer-logo span{color:var(--acc3)}
.footer-brand p{font-size:13px;color:var(--txt3);line-height:1.7;max-width:280px;margin:0 0 14px}
.footer-social{display:flex;gap:8px}
.soc{width:34px;height:34px;border-radius:9px;background:rgba(192,57,43,.1);border:1.5px solid rgba(192,57,43,.2);display:flex;align-items:center;justify-content:center;color:var(--acc3);font-size:14px;transition:.2s}
.soc:hover{background:rgba(192,57,43,.22);transform:translateY(-2px);border-color:rgba(192,57,43,.5)}
.footer-col h4{font-family:'Syne',sans-serif;font-size:13px;font-weight:800;color:var(--white);margin-bottom:13px;letter-spacing:.02em}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:13px;color:var(--txt3);transition:color .2s;display:flex;align-items:center;gap:5px}
.footer-col ul li a::before{content:'›';color:var(--acc3);font-size:16px;line-height:1}
.footer-col ul li a:hover{color:var(--acc3)}
.footer-bottom{padding:14px 0;border-top:1px solid rgba(192,57,43,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.footer-bottom span{font-size:12px;color:var(--txt3)}
.footer-blinks{display:flex;gap:14px}
.footer-blinks a{font-size:12px;color:var(--txt3);transition:color .2s}
.footer-blinks a:hover{color:var(--acc3)}

/* Back to top */
.btt{position:fixed;bottom:clamp(84px,14vw,28px);right:14px;z-index:790;width:40px;height:40px;border-radius:50%;background:var(--g-acc);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(192,57,43,.45);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:.3s}
.btt.show{opacity:1;transform:none;pointer-events:all}
.btt:hover{transform:translateY(-3px);box-shadow:0 7px 22px rgba(192,57,43,.6)}

/* Toast */
.toast{position:fixed;bottom:clamp(82px,14vw,28px);left:50%;transform:translateX(-50%) translateY(16px);background:rgba(22,0,0,.97);border:1.5px solid rgba(192,57,43,.35);border-radius:50px;padding:10px 20px;font-size:13px;font-weight:700;color:var(--acc3);z-index:9999;display:flex;align-items:center;gap:8px;backdrop-filter:blur(16px);box-shadow:0 6px 28px rgba(0,0,0,.55);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;pointer-events:none}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--bg2) 25%,rgba(192,57,43,.04) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 2s infinite;border-radius:var(--r)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .tb-nav,.tb-btn-login,.tb-btn-reg,.tb-icon-btn{display:none}
  .tb-hamburger{display:flex}
  .bnav{display:block}
  body{padding-bottom:0}.page-wrap{padding-bottom:calc(var(--bnav) + 12px)}
  .hero-arr{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-brand p{max-width:100%}
}
@media(max-width:480px){
  .hero-desc{display:none}
  .footer-top{grid-template-columns:1fr}
  .footer-col:nth-child(3),.footer-col:nth-child(4){display:none}
}
@media(min-width:1200px){
  .acard{width:170px}
}