/* ─────────────────────────────────────────────────────────────────────────────
   buttons.css — the house button, applied to the pages that still had flat ones.

   The look is events.html's INFO button, and NOTHING here ever fills: every button, in
   every state, is the same dark plate with a gold hairline and gold text. Selected is a
   brighter border and a lift, not a gold background.

   The plate is a ::before behind the label rather than a skew on the element itself (which
   is what .info-btn does). The element's own transform stays free, and a button whose label
   is a bare text node cannot come out slanted.

   Two things this file learned the hard way:

   1. Do NOT force `position:relative` blindly. .editor-toggle is position:fixed, and
      overriding it dropped the button into normal flow -- it stretched to 440x2896px and
      shoved the whole card_creator layout down. Anything already positioned is restored
      explicitly at the bottom of this file.

   2. `color` needs !important. Pages set their own colour on a `.primary` variant
      (`.dia-btn.primary{color:#1a1205}`), which is more specific than a bare `.dia-btn`
      here -- so removing their gold fill left dark text on a dark plate.

   NOT events' .ev-tab or missions' .tab: those were already angled with clip-path and
   carried their own ::before sliding fill, so a second plate on the same pseudo-element
   fought them. They are styled natively in their own pages instead, with .info-btn's exact
   recipe (skew the element, un-skew the span).

   Pages covered: news, dokkan_tracker, diamond, tierlist, card_creator, events
   (.ch-back, the ALL CHAPTERS / ALL SERIES back button -- it was angled with
   clip-path and had no ::before of its own, so it converts cleanly).
   ───────────────────────────────────────────────────────────────────────────── */

/* `.house-btn` IS THE GENERIC NAME. Every other selector here is a page's own class, so a
   new page had to invent one and add it in three places; this one is the house button by
   name and needs no edit. */
.house-btn,
.pager-btn,
.pager button,
.pg-btn,
.dia-btn,
.catbtn,
.show-more,
.tl-ctrl,
.tl-add,
.editor-toggle,
.fa-btn,
.lead-toggle,
.cb-tbtn,
.cb-back,
.ch-back,
.detail-back,
.mode,
.skip,
.give,
.tabbar .tab {
  position: relative;
  isolation: isolate;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--gold, var(--acc,#FFD84A)) !important;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  /* SEVERAL OF THESE ARE ANCHORS, not buttons -- .detail-back, .ch-back and any <a> given
     .house-btn -- and a link underlines itself. The plate is the button, so the underline
     reads as a stray line through the label. */
  text-decoration: none !important;
  cursor: pointer;
  transition: filter .15s;
}

.house-btn::before,
.pager-btn::before,
.pager button::before,
.pg-btn::before,
.dia-btn::before,
.lead-toggle::before,
.cb-tbtn::before,
.mode::before,
.skip::before,
.give::before,
.cb-back::before,
.ch-back::before,
.detail-back::before,
.catbtn::before,
.show-more::before,
.tl-ctrl::before,
.tl-add::before,
.editor-toggle::before,
.fa-btn::before,
.tabbar .tab::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(-12deg);
  border-radius: 4px;
  background: linear-gradient(180deg, #2b3040 0%, #1a1e28 55%, #0d1017 100%);
  border: 1px solid rgba(var(--acc-rgb), .34);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .6),
              inset 0 1px 0 rgba(255, 255, 255, .07),
              inset 0 -2px 5px rgba(0, 0, 0, .55);
  transition: border-color .15s, filter .15s;
}

.house-btn:not(:disabled):hover::before,
.pager-btn:not(:disabled):hover::before,
.pager button:not(:disabled):hover::before,
.pg-btn:not(:disabled):hover::before,
.dia-btn:hover::before,
.catbtn:hover::before,
.show-more:hover::before,
.tl-ctrl:not(:disabled):hover::before,
.tl-add:hover::before,
.editor-toggle:hover::before,
.fa-btn:hover::before,
.ch-back:hover::before,
/* the games' guess-bar controls were missing from this list, so HINT / SKIP / GIVE UP and
   the DAILY/CHALLENGE pair had NO hover at all once each page's own :hover rule was dropped
   in favour of the house metrics. Same for the two back buttons. */
.mode:not(:disabled):hover::before,
.skip:not(:disabled):hover::before,
.give:not(:disabled):hover::before,
.lead-toggle:hover::before,
.cb-tbtn:hover::before,
.cb-back:hover::before,
.detail-back:hover::before,
.tabbar .tab:hover::before {
  border-color: var(--orange, var(--acc-deep,#F4A500));
  filter: brightness(1.12);
}
/* the label brightens with its plate — a hover that only moves the border reads as nothing
   at .86rem, which is the size these buttons are */
.house-btn:not(:disabled):hover,
.mode:not(:disabled):hover,
.skip:not(:disabled):hover,
.give:not(:disabled):hover,
.dia-btn:hover,
.tl-ctrl:not(:disabled):hover,
.detail-back:hover,
.ch-back:hover { color: #fff !important; }

/* SELECTED — a brighter border and a lit plate, never a gold fill */
.pager-btn.on::before, .pager-btn.active::before,
.pager button.on::before, .pager button.active::before,
.pg-btn.on::before, .pg-btn.active::before,
.dia-btn.active::before, .dia-btn.on::before, .dia-btn.primary::before,
/* the games' DAILY/CHALLENGE pair: .on used to be a solid gold fill, which is the one
   thing the house button never does -- it gets the lit plate + gold border instead */
.mode.on::before,
.lead-toggle.on::before,
.cb-tbtn.on::before,
.catbtn.on::before,
.fa-btn.primary::before,
.tabs .tab.active::before, .tabs .tab.on::before,
.tabbar .tab.active::before, .tabbar .tab.on::before {
  border-color: var(--gold, var(--acc,#FFD84A));
  box-shadow: 0 2px 10px rgba(var(--acc-deep-rgb,244,165,0), .28),
              inset 0 1px 0 rgba(255, 255, 255, .10),
              inset 0 -2px 5px rgba(0, 0, 0, .55);
  filter: brightness(1.16);
}

/* ── INFO-button metrics ────────────────────────────────────────────────────────
   Matching the plate was not enough: .ev-tab was 11.52px text in 11px/26px padding while
   .info-btn is 13.76px in 8px/18px, so the tabs read as a different, chunkier control.
   These need !important because each page's own selector is more specific than a bare
   class here (.ev-tabs .ev-tab beats .ev-tab), so its padding was winning.

   The arrow / nudge buttons are deliberately NOT in this list -- they are small squares and
   18px of side padding would stretch them into slabs. */
.house-btn,
.dia-btn,
.catbtn,
.show-more,
.tl-add,
.editor-toggle,
.fa-btn,
.detail-back,
.tabbar .tab {
  font-size: .86rem !important;
  /* 9px, not .info-btn's 8px: that button carries a real 1px border on the ELEMENT (2px of
     height) while this plate lives on the ::before, so the element is 2px shorter. The extra
     vertical padding makes the rendered height identical -- 36px either way. */
  padding: 9px 18px !important;
}

/* ── PAGINATION — one set of metrics everywhere, taken from missions ────────────
   These were all different: missions 11.52px/9px 14px, news 13.6px/0 10px,
   dokkan_tracker 12.48px/10px 18px, banners 10.88px/7px 13px. */
.pager button,
.pager-btn,
.pg-btn {
  font-size: .72rem !important;
  padding: 9px 14px !important;
  min-width: 40px;
  text-align: center;
}
/* the CURRENT page glows, the way missions' pager always did. Its own rule tinted the
   background gold; the plate is a ::before here, so the same emphasis is a gold border plus
   a real halo -- stronger than the generic selected state so a page number stands out in a
   row of ten. */
.pager button.on::before, .pager button.active::before,
.pager-btn.on::before, .pager-btn.active::before,
.pg-btn.on::before, .pg-btn.active::before {
  border-color: var(--gold, var(--acc,#FFD84A));
  background: linear-gradient(180deg, #3a3a2a 0%, #241f10 55%, #17130a 100%);
  box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35),
              0 0 14px rgba(var(--acc-deep-rgb,244,165,0), .55),
              inset 0 1px 0 rgba(255, 255, 255, .12);
  filter: none;
}

/* the cards grid asked for slightly larger paging than the rest */
.pg-btn { font-size: .82rem !important; padding: 11px 20px !important; min-width: 46px; }

/* a disabled pager arrow should look unavailable, not merely unlit */
.pager-btn:disabled, .pager button:disabled, .pg-btn:disabled,
.tl-ctrl:disabled { opacity: .32; cursor: default; }

/* the tier-list nudge arrows are small squares; the skew needs a little more room or the
   glyph sits on the plate's slanted edge */
.tl-ctrl { padding-left: 9px; padding-right: 9px; }

/* ── buttons that were ALREADY positioned: restore what the shared rule above overrode ──
   A ::before with inset:0 works fine inside a fixed or absolute element, so only the
   `position` needs putting back. */
.editor-toggle { position: fixed; }

/* ---------------------------------------------------------------------------
   PAGINATION ON A PHONE.

   Lives here rather than in a page's <style> block: pages link buttons.css AFTER
   their own styles, so the !important metrics above would beat any per-page
   override. This is the one file that can win, and it fixes every pager at once.

   The symptom it cures: at 360px the row overflowed -- PREV slid under the page
   buttons and the "1392 CARDS" label printed on top of NEXT.
   --------------------------------------------------------------------------- */
@media (max-width:600px){
  .pagination,.pager{flex-wrap:wrap;gap:5px;row-gap:8px;padding:0 4px;}
  .pg-btn,.pager-btn,.pager button{
    padding:9px 12px !important;font-size:.72rem !important;min-width:34px !important;
  }
  /* the record count belongs on its own line, not fighting NEXT for the last 40px */
  .pg-info{flex:1 0 100%;text-align:center;padding:2px 0 0;order:9;}
}

/* ═══ THE SITE ACCENT ══════════════════════════════════════════════════════════
   ONE knob. It defaults to the site gold, so nothing changes hue today -- and when the
   Settings colour picker ships it writes these two onto documentElement and the header,
   the search plate, every lit button, both tab rows and the back buttons all follow at
   once. Keep the pair in step: some properties need the hex and some need the raw
   channels for an rgba(). */
:root{
  --acc:#FFD84A;        --acc-rgb:255, 216, 74;
  --acc-deep:#F4A500;   --acc-deep-rgb:244, 165, 0;
  --acc-ink:#0b0d13;    --acc-deep-ink:#0b0d13;
}

/* ═══ G6 — THE ILLUMINATED SELECTED STATE ══════════════════════════════════════
   Picked from glowbtn_trial.html. The SHAPE does not change: these plates are still
   the skewed ::before they always were. What changes is the light — a tinted fill,
   a bright rim, an INNER glow, and the label taking the colour.

   Scoped to exactly what was asked for. `.mode` (DAILY / CHALLENGE) shares every
   list above with .skip and .give and is deliberately NOT here; detail.html's pager
   is `.feat-pager button`, a different class, so it cannot be reached from here.

   Appended rather than edited in: a later rule of equal specificity wins, so this
   supersedes the pagination halo above without disturbing the shared lists. */

/* ── pagination: the CURRENT page ─────────────────────────────────────────────
   It used to be a gold-brown gradient under an OUTER halo. The halo is what made it
   read as hovered rather than current, and it bled into the numbers either side in a
   row of ten. The light is inside the box now. */
.pager button.on, .pager button.active,
.pager-btn.on, .pager-btn.active,
.pg-btn.on, .pg-btn.active {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(var(--acc-rgb), .75);
}
.pager button.on::before, .pager button.active::before,
.pager-btn.on::before, .pager-btn.active::before,
.pg-btn.on::before, .pg-btn.active::before {
  background: rgba(var(--acc-rgb), .15);
  border-color: rgba(var(--acc-rgb), .80);
  box-shadow: inset 0 0 14px rgba(var(--acc-rgb), .22);
  filter: none;
}

/* ── the games' HINT / SKIP / GIVE UP ─────────────────────────────────────────
   `.skip` on ostdle, passivedle, silhouette and grid; `.give` on dokkandle.
   fullpower has neither — its hint is a text line, not a button, so there is
   nothing there to light. These are ACTIONS rather than a selected state, so the
   illumination is their resting look. */
.skip, .give {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(var(--acc-rgb), .7);
}
.skip::before, .give::before {
  background: rgba(var(--acc-rgb), .15);
  border-color: rgba(var(--acc-rgb), .80);
  box-shadow: inset 0 0 14px rgba(var(--acc-rgb), .22);
}
/* hover lifts the same light rather than swapping to a different one — the label
   already goes #fff from the shared hover rule above, which is more specific */
.skip:not(:disabled):hover::before, .give:not(:disabled):hover::before {
  background: rgba(var(--acc-rgb), .26);
  border-color: var(--acc);
  box-shadow: inset 0 0 18px rgba(var(--acc-rgb), .36);
}
/* a spent button must not still look lit */
.skip:disabled, .give:disabled { text-shadow: none; }
.skip:disabled::before, .give:disabled::before {
  background: rgba(var(--acc-rgb), .05);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}

/* ═══ THE BACK BUTTONS ═════════════════════════════════════════════════════════
   "all back to ... buttons should be gold by default and changed by the colour
   selection + the outline of the buttons too."

   `.ch-back`  events.html   ALL CHAPTERS / ALL SERIES
   `.detail-back` news.html  the article's back link  (NOT detail.html -- different page)
   `.cb-back`  category_buffs.html
   `.back`     categories.html and links.html, which link this file; banner.html and
               panel_missions.html do not, so their own copies are patched in place.

   Only the label and the outline move. The plate keeps its shape and its shading --
   these are back links, not a selected state, so they do not get the G6 inner glow. */
.ch-back, .detail-back, .cb-back, .back {
  color: var(--acc) !important;
}
.ch-back::before, .detail-back::before, .cb-back::before, .back::before {
  border-color: rgba(var(--acc-rgb), .50);
}
.ch-back:hover::before, .detail-back:hover::before,
.cb-back:hover::before, .back:hover::before {
  border-color: var(--acc);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE REMOVE BUTTON -- one look for every ✕ that takes something away. It is diamond.html's
   .dia-cell-x (and the team builder's .fm-remove it was modelled on): a solid red disc with
   a dark ring, a lift on hover and a press on click. Only the LOOK lives here; each page
   keeps its own position. `.rm-x` is the name for any new one. Close buttons and search
   clears are not removals and are deliberately not in this list.
   ───────────────────────────────────────────────────────────────────────────── */
.rm-x,.tl-cell-x,.fm-remove,.sm-clear,.cchip .cchip-x,.lchip .cchip-x,.form-tab .ftx,
.psec-head .del,.team-card .st-del,.tl-ctrl.del{
  width:22px;height:22px;min-width:0;padding:0;border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#ff7a7a,#E83030 55%,#a3161b) !important;
  border:2px solid #0b0d13 !important;color:#fff !important;
  font-family:'Rajdhani',sans-serif;font-size:.72rem;font-weight:700;line-height:1;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 7px rgba(0,0,0,.65) !important;
  transition:opacity .14s,transform .16s cubic-bezier(.3,1.5,.5,1),filter .12s;}
.rm-x:hover,.tl-cell-x:hover,.fm-remove:hover,.sm-clear:hover,.cchip .cchip-x:hover,.lchip .cchip-x:hover,
.form-tab .ftx:hover,.psec-head .del:hover,.team-card .st-del:hover,.tl-ctrl.del:hover{
  transform:scale(1.14);filter:brightness(1.12);}
.rm-x:active,.tl-cell-x:active,.fm-remove:active,.sm-clear:active,.cchip .cchip-x:active,.lchip .cchip-x:active,
.form-tab .ftx:active,.psec-head .del:active,.team-card .st-del:active,.tl-ctrl.del:active{transform:scale(.94);}
/* the smaller ones sit on small cards or inside a label */
.sm-clear,.cchip .cchip-x,.lchip .cchip-x,.tl-ctrl.del{width:20px;height:20px;font-size:.64rem;}
.form-tab .ftx{width:18px;height:18px;font-size:.58rem;margin-left:7px;vertical-align:middle;}
/* the tier list's per-card ✕ appears on hover, as the diamond's does: fading and growing in */
.tl-cell .tl-cell-x{display:flex;opacity:0;transform:scale(.6);pointer-events:none;}
.tl-cell:hover .tl-cell-x{opacity:1;transform:scale(1);pointer-events:auto;}
.tl-cell .tl-cell-x:hover{transform:scale(1.14);}

/* ── news.html's four tabs (ALL / SUMMON / EVENTS / CHECK) take the SITE colour ──
   The base group reads var(--gold, ...), and news.html's :root hardcodes --gold, so the
   labels stayed gold whatever colour was picked in Settings. Same treatment as the back
   buttons above: label and outline follow --acc. Appended so it wins at equal
   specificity; the .active line is needed because that rule carries one class more. */
.tabbar .tab { color: var(--acc) !important; }
.tabbar .tab::before { border-color: rgba(var(--acc-rgb), .50); }
.tabbar .tab:hover::before,
.tabbar .tab.active::before, .tabbar .tab.on::before { border-color: var(--acc); }

/* ═══ GLOWY, the buttons the owner ticked (buttons_review.html, 15 Oct 2026) ═══════════════════════════════
   The house plate above was the old dark one (#2b3040 -> #0d1017, a .34 edge, gold label). These take the Glowy
   plate from nav.css's --btn-* set instead (so Settings > Buttons > Dark still works), a white label, and the lit
   plate when picked / current. Left on the old plate on purpose (owner X'd them): .cb-tbtn (category buffs) and
   .tl-ctrl (tier list). Not on the review (pop-ups / other states), so not touched: .lead-toggle .skip .give
   .cb-back .ch-back .detail-back .catbtn .show-more .tl-add. Appended, so it wins at equal specificity. */
.house-btn,
.pager-btn,
.pager button,
.pg-btn,
.dia-btn,
.mode,
.editor-toggle,
.fa-btn,
.tabbar .tab { color: #fff !important; }
.house-btn::before,
.pager-btn::before,
.pager button::before,
.pg-btn::before,
.dia-btn::before,
.mode::before,
.editor-toggle::before,
.fa-btn::before,
.tabbar .tab::before {
  background: linear-gradient(rgba(var(--acc-rgb,255,216,74),var(--btn-tint)),rgba(var(--acc-rgb,255,216,74),var(--btn-tint))),var(--btn-base);
  border: 1px solid rgba(var(--acc-rgb,255,216,74),var(--btn-edge-a));
  box-shadow: 0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  filter: none;
}
.house-btn:not(:disabled):hover::before,
.pager-btn:not(:disabled):hover::before,
.pager button:not(:disabled):hover::before,
.pg-btn:not(:disabled):hover::before,
.dia-btn:not(:disabled):hover::before,
.mode:not(:disabled):hover::before,
.editor-toggle:not(:disabled):hover::before,
.fa-btn:not(:disabled):hover::before,
.tabbar .tab:not(:disabled):hover::before {
  border-color: var(--acc, #FFD84A);
  box-shadow: 0 0 14px rgba(var(--acc-deep-rgb, 244, 165, 0), .45);
  filter: none;
}
.pager-btn.on::before, .pager-btn.active::before, .pager button.on::before, .pager button.active::before,
.pg-btn.on::before, .pg-btn.active::before, .dia-btn.on::before, .dia-btn.active::before, .dia-btn.primary::before,
.mode.on::before, .fa-btn.primary::before, .tabbar .tab.on::before, .tabbar .tab.active::before {
  background: linear-gradient(180deg,rgba(var(--acc-rgb,255,216,74),.40),rgba(var(--acc-rgb,255,216,74),.14));
  border-color: var(--acc, #FFD84A);
  box-shadow: 0 0 12px rgba(var(--acc-deep-rgb,244,165,0),.5),inset 0 1px 0 rgba(255,255,255,.12);
  filter: none;
}