/* ============================================================
   PAKISTAN ANIME — layout.css · dark neo-brutalism header, nav, footer
   ============================================================ */

.appRoot{min-height:100vh;padding-top:var(--header-h);outline:none}

/* ------------------------------------------------------------
   header — solid dark bar with off-white border
   ------------------------------------------------------------ */
.siteHeader{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  background:var(--bg);
  border-bottom:var(--bw-lg) solid var(--line);
}
.headerInner{
  max-width:1480px;margin:0 auto;height:100%;
  padding:0 clamp(16px,3.4vw,44px);
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);
  position:relative;
}
.logo{display:inline-flex;align-items:center;gap:11px;flex:none}
.logoMark{
  width:40px;height:40px;border-radius:11px;overflow:hidden;
  border:var(--bw) solid var(--ink);background:var(--violet);
  box-shadow:var(--sh-ink);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.logo:hover .logoMark{transform:translate(-2px,-2px) rotate(-3deg);box-shadow:5px 5px 0 0 var(--line)}
.logoText{
  font-family:'Archivo Black','Inter',sans-serif;
  font-size:21px;letter-spacing:-.02em;color:var(--text);font-weight:400;
}
.logoText b{color:var(--violet);font-weight:400}

/* nav perfectly centered in the header (PC) */
.headerNav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:9px;
  white-space:nowrap;
}
.headerNav a,.headerNav button{
  padding:9px 17px;border-radius:11px;
  color:var(--text);font-size:14.5px;font-weight:800;
  border:2.5px solid transparent;
  transition:all .16s var(--ease);
}
.headerNav button{background:none;font-family:inherit;cursor:pointer;position:relative}
.headerNav a:hover,.headerNav button:hover{border-color:var(--line);background:var(--panel);box-shadow:3px 3px 0 0 var(--line);transform:translate(-1px,-1px)}
.headerNav a.active,.headerNav button.active{background:var(--yellow);border-color:var(--ink);color:var(--ink);box-shadow:3px 3px 0 0 var(--line)}

.headerActions{margin-left:auto;display:flex;align-items:center;gap:11px}
/* telegram — icon-only square in the header; text variant (.btn.tgBtn) used elsewhere */
.tgBtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 19px;border-radius:var(--r-md);
  background:var(--tg);color:#fff;
  font-size:14px;font-weight:800;
  border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-sm);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.tgBtn svg{width:17px;height:17px}
.tgBtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--line)}
.tgBtn:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--line)}

/* ------------------------------------------------------------
   footer — centered legal block (old-site style)
   ------------------------------------------------------------ */
.siteFooter{
  margin-top:clamp(48px,7vw,90px);
  background:#0C0C10;color:#fff;
  border-top:var(--bw-lg) solid var(--line);
}
.footerInner{max-width:1480px;margin:0 auto;padding:38px clamp(16px,3.4vw,44px) 120px;text-align:center}
.footerLinks{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 8px;
  padding:0 0 20px;
}
.footerLinks a{
  font-size:13px;font-weight:700;color:#dcdce4;
  padding:6px 13px;border:2px solid transparent;border-radius:9px;
  transition:all .15s var(--ease);
}
.footerLinks a:hover{color:var(--ink);background:var(--lime);border-color:var(--line)}
.footerCopyright{font-size:14px;font-weight:800;color:#fff;margin-bottom:9px}
.footerNotice{font-size:12.5px;color:#9a9aa6;margin-bottom:6px}
.footerDomain{font-family:'Space Mono',monospace;font-size:12.5px;color:var(--dim);margin-top:10px}

/* ------------------------------------------------------------
   mobile bottom nav — floating brutal pill
   ------------------------------------------------------------ */
.bottomNav{
  position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;
  display:none;
  background:var(--panel);
  border:var(--bw-lg) solid var(--line);border-radius:20px;
  box-shadow:5px 5px 0 0 var(--line);
  padding:7px;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
/* কীবোর্ড খোলা — টাইপিং এলিয়া ঢেকে দেওয়ার বদলে বার নিচে সরে যায় */
body.kbOpen .bottomNav{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(18px)}
.bottomNav a,.bottomNav button{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:58px;padding:7px 0 6px;border-radius:13px;
  color:var(--text);transition:all .16s var(--ease);
}
.bottomNav svg{width:21px;height:21px}
.bottomNav span{font-size:10px;font-weight:800;letter-spacing:.02em}
.bottomNav a.active,.bottomNav button.active{background:var(--lime);color:var(--ink);border:2px solid var(--ink)}
.bottomNav button:active{transform:scale(.94)}
.bottomNav button{background:none;border:none;font-family:inherit;cursor:pointer;position:relative}

@media (max-width:820px){
  .headerNav{display:none}
  .bottomNav{display:flex}
  /* বার-উচ্চতা + ফাঁক + safe-area — আইফোনে বার উঁচুতে উঠলেও শেষ কনটেন্ট লুকাবে না */
  .footerInner{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))}
  :root{--header-h:64px}
  .logoMark{width:34px;height:34px}
  .logoText{font-size:18px}
}