/* ─────────────────────────────────────────────────────────────────────────────
   pagination.css -- the page buttons under a list, P3 HERO STRIP of pagination_trial.html (owner, 16 Oct 2026, "p3
   please"): the row sits on a band in the Cards-strip look (C5) -- a faint grid, a glow rising from the bottom in the
   site colour, a site-colour line under it -- and the current page is lit in the site colour. Fonts untouched.
   Three markups share it: .pagination/.pg-btn (Cards, Character Box), .pager button (Summons, Missions, Popular Teams)
   and .pager/.pager-btn (News, Community, My Saves). Link it AFTER the page's own styles.

   THE BAND RUNS THE FULL WIDTH OF THE SCREEN, like the Cards strip under the menu ("make the p3 stuff go all the
   way"), although the row itself sits inside the page's column: the band is a ::before 100vw wide, centred on the
   row. 100vw counts the scrollbar, so the page clips sideways overflow (overflow-x:clip keeps sticky bars working).
   ───────────────────────────────────────────────────────────────────────────── */
html{overflow-x:clip;}
.pagination,.pager{position:relative;isolation:isolate;padding:16px 12px !important;background:none !important;border-bottom:0 !important;}
.pagination::before,.pager::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);pointer-events:none;border-bottom:2px solid var(--acc,#E8323C);
  background:radial-gradient(ellipse at 50% 170%,rgba(var(--acc-rgb,232,50,60),.32),transparent 62%),
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/22px 22px,#0d1016;}
/* one page only = no buttons: no empty band */
.pagination:empty,.pager:empty{display:none !important;}
.pg-btn.active,.pager .pnum.active,.pager-btn.active,.pager button.on{
  background:linear-gradient(180deg,rgba(var(--acc-rgb,232,50,60),.42),rgba(var(--acc-rgb,232,50,60),.14)),#0d1016 !important;
  border-color:var(--acc,#E8323C) !important;color:#fff !important;box-shadow:0 0 12px rgba(var(--acc-rgb,232,50,60),.45) !important;}
.pg-btn,.pager button,.pager-btn{transition:border-color .15s,box-shadow .15s;}
.pg-btn:hover:not(:disabled),.pager button:hover:not(:disabled),.pager-btn:hover:not(:disabled){
  border-color:rgba(var(--acc-rgb,232,50,60),.7) !important;color:#fff !important;}

/* THE BAND SITS RIGHT ON THE FOOTER (owner, 16 Oct 2026, "should be just above the footer"): when page buttons are
   showing and they end the list, the space under them goes -- their own bottom margin, the bottom padding of the
   container they end (main / .wrap / #view) and the footer's top margin. With no page buttons nothing changes. */
.pagination:not(:empty),.pager:not(:empty){margin-bottom:0 !important;}
:is(main,.wrap,#view):has(.pagination:not(:empty):last-child,.pager:not(:empty):last-child){padding-bottom:0 !important;margin-bottom:0 !important;}
body:has(.pagination:not(:empty),.pager:not(:empty)) > .site-foot{margin-top:0 !important;}