/* ---- THE SITE ACCENT: the defaults -----------------------------------------
   nav.js computes and writes all five onto documentElement (see its header). These are
   the fallbacks -- the site's own gold and orange -- so a page loading for one frame
   without it, or with storage blocked, is the site as it has always looked.

   --acc      the bright one   (was --gold)      --acc-ink   a readable label on a solid --acc
   --acc-deep the darker one   (was --orange)    --acc-deep-ink   the same, on --acc-deep
   Keep each colour and its -rgb IN STEP: some properties need the hex, some the bare
   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;
}

/* nav.css — site header/nav */
/* The bar: N4's colour and outline.
   THE BLUR ONLY EARNS ITS KEEP BECAUSE THIS IS `position:sticky` -- over a flat page it does
   nothing at all, and content scrolling underneath is the entire point of it.
   What went: a 2px SOLID orange border and a 32px orange glow, which together were the
   heaviest line anywhere on the site sitting above every page of it. */
header{
  background:rgba(18,21,29,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(var(--acc-rgb,255,216,74),.26);
  padding:0 2rem;display:flex;align-items:center;justify-content:flex-start;
  gap:24px;height:72px;position:sticky;top:0;z-index:200;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
/* THE HEIGHT IS SET INLINE BY nav.js, not here -- an inline style beats a stylesheet rule,
   so changing it in this file would do nothing. It was 72px: the full bar height, measured
   at -1px above the top edge and sitting ON the 2px bottom border, with the PNG carrying
   0.0% padding of its own below the ink. It is 44px in nav.js now. */
.logo{font-family:'Black Han Sans',sans-serif;font-size:1.4rem;letter-spacing:4px;color:var(--acc-deep,#F4A500);
  flex:0 0 auto;padding-right:20px;}
.logo span{color:var(--acc,#FFD84A);}
.logo a{display:block;text-decoration:none;}

.nav{display:flex;gap:2px;align-items:center;}

/* top-level items: plain links + dropdown buttons — identical styling + hover.
   A DROPDOWN PARENT IS `.nav-dd-btn` INSIDE `.nav-dd`, so it is NOT a child of `.nav` and
   every rule here has to name both or it styles seven items and misses four. */
.nav>a,.nav-dd-btn{
  font-family:'Rajdhani',sans-serif;font-size:1.0rem;font-weight:600;letter-spacing:0.5px;
  color:#9aa3b4;text-decoration:none;padding:8px 16px;cursor:pointer;
  position:relative;isolation:isolate;transition:color .16s ease;
  display:inline-flex;align-items:center;line-height:1;
}

/* ── THE PLATE, AND THE WIPE (H3) ────────────────────────────────────────────
   The plate is a ::before BEHIND the label, never the element — skewing the <a> itself
   would slant the words with it. That is what lets the plate animate while the text
   stays upright.

   It sweeps in from the left ALONG ITS OWN SKEW: `scaleX` under a `skewX` runs on the
   shape's own axis, so the wipe travels in the direction the plate leans rather than
   squaring up first. `transform-origin:left center` is what makes it a wipe and not a
   grow — the same declaration with `center` is a completely different effect.

   Only `transform` and `opacity` animate, so a hover composites on the GPU and can never
   make a sticky bar re-layout. */
.nav>a::before,.nav-dd-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:skewX(-12deg) scaleX(0);transform-origin:left center;
  border-radius:4px;background:rgba(255,255,255,.05);border:1px solid transparent;
  opacity:0;pointer-events:none;
  transition:transform .22s cubic-bezier(.3,.8,.3,1),opacity .12s ease,
             background .16s ease,border-color .16s ease;
}
.nav>a:hover,.nav-dd:hover .nav-dd-btn{color:#fff;text-shadow:0 0 6px rgba(var(--acc-rgb,255,216,74),.6);}
/* H12 of navhover_trial.html (owner, 11 Oct 2026): a SOFT WASH in the site colour wipes in with a glow
   bleeding out of it, the word white -- it was a solid --acc plate with dark letters */
.nav>a:hover::before,.nav-dd:hover .nav-dd-btn::before{
  opacity:1;transform:skewX(-12deg) scaleX(1);
  background:rgba(var(--acc-rgb,255,216,74),.18);border-color:rgba(var(--acc-rgb,255,216,74),.5);
  box-shadow:0 0 16px rgba(var(--acc-rgb,255,216,74),.45);
}

/* ACTIVE IS NOT THE HOVER, and now it is the DARKER half of the same colour rather than
   a different treatment: you are POINTING AT --acc, you are ON --acc-deep. Both are
   filled and neither moves, so the two can never be confused at a glance.
   The label is COMPUTED either way -- a solid gold plate wants dark letters and a solid
   indigo one wants white, so a fixed #0b0d13 here is invisible on half the palette. */
/* THE PAGE YOU ARE ON WEARS THE HOVER, HELD (owner, 11 Oct 2026: "when im in shop ... stay like that"):
   H12's soft wash in the site colour with its glow, the word white -- the same look as pointing at an item,
   kept on while you are on that page. (It was N3 -- a gold glowing word, no plate -- earlier the same day.) */
.nav>a.active,.nav-dd-btn.active,.nav>a.active:hover,.nav-dd:hover .nav-dd-btn.active{
  color:#fff;text-shadow:0 0 6px rgba(var(--acc-rgb,255,216,74),.6);}
.nav>a.active::before,.nav-dd-btn.active::before,
.nav>a.active:hover::before,.nav-dd:hover .nav-dd-btn.active::before{
  opacity:1;transform:skewX(-12deg) scaleX(1);
  background:rgba(var(--acc-rgb,255,216,74),.18);border-color:rgba(var(--acc-rgb,255,216,74),.5);
  box-shadow:0 0 16px rgba(var(--acc-rgb,255,216,74),.45);}

/* the caret has to follow the label's colour, not stay grey on a gold plate */
.nav-dd-btn .cx{font-size:.62em;margin-left:2px;opacity:.75;}

@media (prefers-reduced-motion:reduce){
  .nav>a::before,.nav-dd-btn::before{transition:opacity .12s ease;transform:skewX(-12deg) scaleX(1);}
}

.nav-dd{position:relative;display:inline-flex;align-items:center;}
/* D3 -- A LEFT RAIL PER ROW. Picked from navdd_trial.html.

   The panel was `#232630`, which was the PAGE BACKGROUND when this menu was written --
   every floating box built since (the bell, the account menu, the node popups) is
   near-black under a hairline, so the menu had quietly been left behind by its own site.

   The rows are the E5 treatment that ships on the events and missions tabs: flat, with
   the accent arriving as a bar down the leading edge. Nothing moves on hover, which on a
   twelve-row menu like ITEMS is the point -- twelve plates wiping in is a lot of motion
   for a list you are reading. */
.nav-dd-menu{display:none;position:absolute;top:100%;left:0;
  background:linear-gradient(180deg,#12151d,#08090d);
  border:1px solid rgba(255,255,255,.10);border-radius:10px;min-width:196px;z-index:300;
  box-shadow:0 22px 50px rgba(0,0,0,.62);overflow:hidden;padding:6px;}
.nav-dd:hover .nav-dd-menu{display:block;}
.nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;}
.nav-dd-menu a{display:block;padding:10px 13px;border-left:3px solid transparent;
  border-radius:0 5px 5px 0;font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;
  letter-spacing:.6px;color:#e9ecf2;text-decoration:none;   /* page names WHITE (owner, 11 Oct 2026) */
  transition:color .15s,background .15s,border-left-color .18s,text-shadow .15s;}
/* HOVER LIGHTS UP IN THE SITE COLOUR (owner, 8 Oct 2026: "why isnt the nav glowing anymore") -- the label
   turns accent and glows, a 14% wash fills the row and the rail comes up to nearly full. It had slipped
   back to a 4% grey wash, which read as nothing happening. */
.nav-dd-menu a:hover{color:#fff;background:rgba(var(--acc-rgb,255,216,74),.14);
  border-left-color:rgba(var(--acc-rgb,255,216,74),.85);text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.55);}
/* the page you are already on: the rail goes full accent and the row takes a 10% wash --
   the same two signals the tab rows use, so a menu entry and a tab agree */
.nav-dd-menu a.active{color:#fff;border-left-color:var(--acc,#FFD84A);
  background:rgba(var(--acc-rgb,255,216,74),.10);
  text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.6);}

.header-count{font-family:'Oswald',sans-serif;font-size:0.7rem;letter-spacing:2px;color:#7A7668;}
.header-count span{color:var(--acc-deep,#F4A500);font-weight:700;}

/* ---------------------------------------------------------------------------
   THE RIGHT-HAND CLUSTER.  [ NAV_RIGHT ][ bell ][ account ]
   The auto margin lives HERE and nowhere else -- .header-count used to carry it,
   and two auto margins in one flex row split the free space between them, which
   is the drift the mobile block below already warns about.
--------------------------------------------------------------------------- */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.nav-right .header-count{margin-left:0;}

.nav-bell{position:relative;}
.bell-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;
  color:#9aa3b4;transition:color .16s ease;
}
.bell-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.bell-btn:hover,.nav-bell.open .bell-btn{color:var(--acc,#FFD84A);}
/* the plate is the house angled one, drawn only on hover/open so a quiet bar stays quiet */
.bell-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);
  border-radius:4px;background:rgba(var(--acc-rgb,255,216,74),.12);border:1px solid rgba(var(--acc-rgb,255,216,74),.40);
  opacity:0;transition:opacity .14s ease;
}
.bell-btn:hover::before,.nav-bell.open .bell-btn::before{opacity:1;}

.bell-dot{
  position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:99px;
  background:var(--acc,#FFD84A);border:2px solid #12151d;pointer-events:none;
}

.bell-drop{
  position:absolute;top:calc(100% + 10px);right:0;width:340px;z-index:400;
  background:linear-gradient(180deg,#1b2029,#0d1017);
  border:1px solid rgba(var(--acc-rgb,255,216,74),.24);border-radius:10px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.6);
}
.bell-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;background:rgba(var(--acc-deep-rgb,244,165,0),.09);
  border-bottom:1px solid rgba(var(--acc-rgb,255,216,74),.25);
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1.3px;
  font-size:.68rem;text-transform:uppercase;color:var(--acc,#FFD84A);
}
.bell-head a{font-family:Inter,sans-serif;font-size:.68rem;letter-spacing:0;
  text-transform:none;color:#9aa3b4;text-decoration:none;}
.bell-head a:hover{color:var(--acc,#FFD84A);}

.bell-row{
  display:block;padding:12px 14px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .14s ease;
}
.bell-row:last-child{border-bottom:0;}
.bell-row:hover{background:rgba(255,255,255,.04);}
.bell-row.unread{background:rgba(var(--acc-rgb,255,216,74),.045);}
.bell-row.unread:hover{background:rgba(var(--acc-rgb,255,216,74),.08);}

.bell-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap;}
/* version and date on one line, the version on the house angled plate */
.bell-top .ver{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;
  padding:3px 9px;font-family:'Oswald',sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.8px;color:#EDF1F8;
}
.bell-top .ver::before{content:'';position:absolute;inset:0;z-index:-1;
  transform:skewX(-12deg);border-radius:3px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);}
.bell-top .dt{font-family:'Oswald',sans-serif;font-weight:500;font-size:.68rem;
  letter-spacing:.6px;color:#6c7484;}
/* THE TITLE is the row's heading, on top -- then the version and date under it (owner, 15 Oct 2026) */
.bell-ttl{display:block;margin-bottom:7px;font-family:'Black Han Sans',sans-serif;font-size:.95rem;
  letter-spacing:.6px;line-height:1.25;color:#fff;}
/* NEW is ANGLED, never a pill */
.bell-top .newtag{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;
  margin-left:auto;padding:3px 9px;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:.6rem;letter-spacing:1.4px;
  text-transform:uppercase;color:#fff;gap:5px;
}
/* NEW is ALWAYS RED (patchnotes N1) -- a lit red outline and a pulsing dot, never the site colour */
.bell-top .newtag::before{content:'';position:absolute;inset:0;z-index:-1;
  transform:skewX(-12deg);border-radius:3px;
  background:rgba(232,48,48,.12);border:1px solid rgba(255,74,74,.85);}
.bell-top .newtag::after{content:'';order:-1;width:5px;height:5px;border-radius:50%;background:#FF4A4A;box-shadow:0 0 6px #FF4A4A;
  animation:newPulse 1.8s ease-in-out infinite;}
@keyframes newPulse{50%{opacity:.35;}}

.bell-sum{display:block;font-family:Inter,sans-serif;font-size:.78rem;line-height:1.55;
  color:#9aa3b4;}
.bell-row{cursor:pointer;color:inherit;}   /* each release is a link to it on the patch notes page */
/* VIEW FULL PATCH NOTES -- the house angled plate across the panel, tinted at rest, filled on
   hover (the Sign in button's behaviour), label computed so it reads on any site colour */
.bell-foot{padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.06);}
.bell-all{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;
  padding:11px 14px;text-decoration:none;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--acc,#FFD84A);transition:color .16s ease;}
.bell-all::before{content:'';position:absolute;inset:0 4px;z-index:-1;transform:skewX(-12deg);border-radius:4px;
  background:rgba(var(--acc-rgb,255,216,74),.12);border:1px solid rgba(var(--acc-rgb,255,216,74),.45);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;}
.bell-all:hover{color:var(--acc-ink,#0b0d13);}
.bell-all:hover::before{background:var(--acc,#FFD84A);border-color:var(--acc,#FFD84A);box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.35);}
.bell-empty{padding:22px 14px;text-align:center;font-family:Inter,sans-serif;
  font-size:.78rem;color:#6c7484;}

/* ---------------------------------------------------------------------------
   ONE scrollbar for the whole site. Pages had drifted to 4px, 5px, 6px, 7px and
   three hid it entirely; this is the dokkan_tracker.html one, which is the style
   the site settled on. Defined here because nav.css is the only stylesheet every
   page loads. A page-level <style> comes AFTER this link and would win, so the
   per-page copies were removed rather than left to fight it.
   --------------------------------------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:var(--bg4,#31354A) var(--bg,#1C1E26);}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--bg,#1C1E26);}
::-webkit-scrollbar-thumb{background:var(--bg4,#31354A);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--orange,var(--acc-deep,#F4A500));}

/* ---------------------------------------------------------------------------
   MOBILE NAV — the hamburger.

   Breakpoint is 1500px (was 1150; raised Sep 2026 when OTHER made it twelve items -- MEASURED: the
   last item ends at 1357px and the bell + account need ~120px more), not the usual 900. Ten top-level items at ~95px each
   plus a 200px logo and the count widget need ~1250px to sit on one line, so
   the nav starts wrapping and colliding well before a phone width. Anything
   narrower than this gets the burger.

   .nav is position:fixed while open. It is a child of the sticky <header>, and
   sticky does NOT create a containing block for fixed descendants (only
   transform/filter/perspective do), so it anchors to the viewport as intended
   while still inheriting the header's z-index:200 and painting above the page.
   --------------------------------------------------------------------------- */
.nav-burger{
  display:none;order:3;flex:0 0 auto;   /* margin-left is set in the media query */
  width:42px;height:42px;padding:0;border:1px solid rgba(var(--acc-deep-rgb,244,165,0),.45);
  border-radius:8px;background:rgba(0,0,0,.25);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-burger:hover{border-color:var(--acc-deep,#F4A500);background:rgba(var(--acc-deep-rgb,244,165,0),.1);}
.nav-burger .bb{display:block;position:relative;width:20px;height:14px;}
.nav-burger .bb i{
  position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--acc-deep,#F4A500);
  transition:transform .2s ease, opacity .15s ease, top .2s ease;
}
.nav-burger .bb i:nth-child(1){top:0;}
.nav-burger .bb i:nth-child(2){top:6px;}
.nav-burger .bb i:nth-child(3){top:12px;}
/* the X */
.nav-burger[aria-expanded="true"] .bb i:nth-child(1){top:6px;transform:rotate(45deg);}
.nav-burger[aria-expanded="true"] .bb i:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] .bb i:nth-child(3){top:6px;transform:rotate(-45deg);}

@media (max-width:1500px){
  header{padding:0 1rem;gap:12px;height:60px;}
  .logo img{height:46px !important;}
  /* Burger FIRST, then the logo -- the dokkandb arrangement, and the one a thumb
     expects: on a phone the top-left corner is the reachable one.
     Only ONE auto margin in the row, or the free space is split between the two
     elements that have it and the count drifts into the middle of the header. */
  .nav-burger{display:inline-flex;order:0;margin:0 2px 0 0;}
  /* Dead centre regardless of what sits either side of it. Taken out of the flex
     row and pinned to the header instead -- as a flex item its position depends on
     the burger's and the count's widths, so it would sit centred on one page and
     off-centre on another. <header> is position:sticky, which IS a positioned
     element, so it is the containing block for this. */
  .logo{order:1;position:absolute;left:50%;transform:translateX(-50%);
        pointer-events:auto;z-index:1;}
  .nav-right{order:2;margin-left:auto;gap:6px;}
  .header-count{order:0;margin-left:0;font-size:.62rem;letter-spacing:1.4px;}
  /* the panel is wider than the gap to the right edge on a phone, so pin it to the
     viewport instead of to the button */
  .bell-drop{position:fixed;top:60px;left:10px;right:10px;width:auto;}

  .nav{
    order:4;position:fixed;left:0;right:0;top:60px;
    display:block;padding:8px 10px 14px;
    max-height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,#1a1200 0%,#232630 100%);
    border-bottom:2px solid var(--acc-deep,#F4A500);box-shadow:0 12px 32px rgba(0,0,0,.6);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav.open{opacity:1;transform:none;pointer-events:auto;}

  /* full-width rows instead of a pill row */
  .nav>a,.nav-dd-btn{
    display:flex;width:100%;justify-content:space-between;align-items:center;
    font-size:1.05rem;padding:13px 14px;border-radius:8px;
  }
  .nav>a:active,.nav-dd-btn:active{background:rgba(255,255,255,.05);}
  /* the sliding underline is a hover affordance; touch has no hover */
  .nav>a::after,.nav-dd-btn::after{display:none;}
  /* the desktop's SOLID plate (::before, filled --acc-deep) still draws here, so the label
     must be its computed ink -- this rule used to paint it --acc-deep, the plate's own
     colour, and the current page's name vanished from the menu (owner, 27 Sep 2026) */
  .nav>a.active,.nav-dd-btn.active{color:#fff;}   /* the held hover in the phone menu too: white on the wash */

  .nav-dd{display:block;width:100%;}
  /* the 14px hover bridge below a dropdown would swallow taps on mobile */
  .nav-dd::after{display:none;}
  /* hover must not open anything here — .open is set by tapping the row */
  .nav-dd:hover .nav-dd-menu{display:none;}
  .nav-dd.open .nav-dd-menu{display:block;}
  .nav-dd-menu{
    position:static;min-width:0;border:0;border-left:2px solid rgba(var(--acc-deep-rgb,244,165,0),.35);
    border-radius:0;margin:2px 0 6px 14px;padding:2px 0 2px 6px;
    background:transparent;box-shadow:none;
  }
  .nav-dd-menu a{padding:11px 12px;font-size:1rem;}
  .nav-dd-btn .cx{transition:transform .2s ease;}
  .nav-dd.open .nav-dd-btn .cx{transform:rotate(180deg);}

  body.nav-locked{overflow:hidden;}
}

/* ---------------------------------------------------------------------------
   "drag a button and it stops working".

   Links and images are natively draggable. Press a nav item, a pager button or a
   card and move a few pixels and the browser starts an HTML5 drag of the link or
   its image instead of completing the tap -- the press is consumed, no click ever
   fires, and the control reads as dead until you tap it cleanly.

   touch-action:manipulation additionally drops the ~300ms double-tap-zoom wait, so
   taps register immediately rather than feeling like a missed press.
   --------------------------------------------------------------------------- */
a, button, img, [onclick] { -webkit-user-drag: none; }
a, button, [onclick], .card-item, .nav-burger, .pg-btn, .pager-btn {
  touch-action: manipulation;
}
/* an image inside a control is the usual thing that gets grabbed */
a img, button img, [onclick] img { -webkit-user-drag: none; user-select: none; }

/* ---------------------------------------------------------------------------
   THE ACCOUNT BUTTON — a person glyph to the RIGHT of the bell, opening Sign in
   and Settings. It sits in `.nav-right`, which already owns the one auto margin.
--------------------------------------------------------------------------- */
.nav-acct{position:relative;}
.acct-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;background:none;cursor:pointer;
  color:#fff;transition:color .16s ease;
}
.acct-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
/* the same angled plate the bell wears, drawn only on hover/open */
.acct-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);
  border-radius:4px;background:rgba(var(--acc-rgb,255,216,74),.12);
  border:1px solid rgba(var(--acc-rgb,255,216,74),.40);
  opacity:0;transition:opacity .14s ease;
}
.acct-btn:hover::before,.nav-acct.open .acct-btn::before{opacity:1;}
/* the favourite card's circle thumb, when one is chosen -- ringed in the accent */
.acct-btn.has-av{width:auto;height:auto;min-width:36px;min-height:36px;}
.acct-btn .acct-av{width:var(--av-nav,32px);height:var(--av-nav,32px);border-radius:50%;display:block;overflow:hidden;position:relative;
  box-shadow:0 0 0 1.5px var(--ring,rgba(var(--acc-rgb,255,216,74),.75));transition:box-shadow .16s ease;}
/* the portrait is a layer ABOVE the ring, not clipped inside it */
.acct-btn .acct-av img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;
  transform:translate(var(--av-x,0%),var(--av-y,0%)) scale(var(--av-zoom,1.29));}
.acct-btn.has-av:hover .acct-av,.nav-acct.open .acct-btn.has-av .acct-av{
  box-shadow:0 0 0 2px var(--ring,var(--acc,#FFD84A));}
.acct-btn.has-av::before{display:none;}

.acct-drop{
  position:absolute;top:calc(100% + 10px);right:0;width:190px;z-index:400;
  background:linear-gradient(180deg,#1b2029,#0d1017);
  border:1px solid rgba(var(--acc-rgb,255,216,74),.24);border-radius:10px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.6);
}
.acct-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 14px;border:0;background:none;cursor:pointer;text-align:left;
  text-decoration:none;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.88rem;
  letter-spacing:.4px;color:#cfd6e4;border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .14s ease,color .14s ease;
}
.acct-item:last-of-type{border-bottom:0;}
.acct-item:hover{background:rgba(var(--acc-rgb,255,216,74),.14);color:var(--acc,#FFD84A);}
/* menu icons are SVG on currentColor: the standard person for Profile, a real gear for
   Settings (drawn bigger -- a gear's teeth vanish at 16px), an arrow-in for Sign in */
.acct-item .ic{flex:0 0 22px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.9;}
.acct-item .ic svg{display:block;width:18px;height:18px;}
.acct-item .ic .i-person,.acct-item .ic .i-gear{fill:currentColor;stroke:none;}
.acct-item .ic .i-gear{width:21px;height:21px;}
.acct-item .ic .i-line{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.acct-drop{width:210px;}
/* signed in: who you are, then Profile / Settings, then Log out (L5) */
.acct-who{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(var(--acc-rgb,255,216,74),.12),transparent);}
.acct-who .aw-av{flex:0 0 34px;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#0b0d13;box-shadow:0 0 0 2px var(--ring,var(--acc,#FFD84A));}
.acct-who .aw-av img{width:100%;height:100%;object-fit:contain;transform:scale(1.29);display:block;}
.acct-who .aw-tx{min-width:0;display:flex;flex-direction:column;}
/* the name is ITALIC and its box clips (for the ellipsis on a very long name), so the last letter's
   lean was cut off -- "KenpachiMert" lost half its t. The padding gives the slant room; smaller at
   the owner's ask (29 Sep). */
.acct-who .aw-nm{font-family:'Black Han Sans',sans-serif;font-style:italic;font-size:.9rem;color:#fff;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.22em;}
.acct-who .aw-tg{font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:1.4px;color:#9aa3b4;}
/* .acct-item is display:flex, which beats the [hidden] attribute -- say it outright */
.acct-drop [hidden]{display:none !important;}
.acct-item.acct-out:hover{background:rgba(232,96,96,.12);color:#f3a3a3;}
.acct-note{
  margin:0;padding:9px 14px 11px;font-family:Inter,sans-serif;font-size:.7rem;
  line-height:1.5;color:#6c7484;border-top:1px solid rgba(255,255,255,.06);
}

@media (max-width:1500px){
  /* same treatment the bell panel needs: 190px is wider than the gap to the edge */
  .acct-drop{position:fixed;top:60px;right:10px;left:auto;width:210px;}
}

/* ---------------------------------------------------------------------------
   SB1 -- the Sign in control, inside the account menu.

   SB1 was picked for "the nav Sign in button", and the account glyph has since
   replaced a standalone one -- so the pick lands on the Sign in ITEM, which makes it
   the primary action of the menu while Settings stays a plain row. That is the honest
   reading; if a standalone Sign in button beside the glyph is wanted instead, this rule
   moves to it unchanged.

   A tinted plate at rest that FILLS on hover -- the same thing the nav items do, so the
   button and the bar behave alike. The label is COMPUTED: a solid gold plate wants dark
   letters and a solid indigo one wants white.
--------------------------------------------------------------------------- */
.acct-drop .acct-item#navSignIn{
  position:relative;isolation:isolate;margin:9px 10px 6px;width:calc(100% - 20px);
  padding:9px 14px;border-bottom:0;border-radius:0;
  justify-content:center;color:var(--acc,#FFD84A);
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1.2px;
  transition:color .16s ease;
}
.acct-drop .acct-item#navSignIn::before{
  content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);border-radius:4px;
  background:rgba(var(--acc-rgb,255,216,74),.12);
  border:1px solid rgba(var(--acc-rgb,255,216,74),.40);
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,
             transform .18s cubic-bezier(.4,1.2,.5,1);
}
.acct-drop .acct-item#navSignIn:hover{
  background:none;color:var(--acc-ink,#0b0d13);
}
.acct-drop .acct-item#navSignIn:hover::before{
  background:var(--acc,#FFD84A);border-color:var(--acc,#FFD84A);
  box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.35);
}
/* it SINKS when pressed rather than growing -- a control in a 190px menu must not
   change size, or the rows under it shift */
.acct-drop .acct-item#navSignIn:active::before{transform:skewX(-12deg) scale(.97);}
/* THE MENU STAYS `overflow:hidden` -- it is what keeps the rounded corners, and letting
   it out would let Settings' hover wash square them off. The plate overhangs its own box
   by about height x tan(12deg) / 2 = 3.8px a side, which the 10px margin already clears,
   so there is nothing to let out. */
.acct-drop .acct-item:not(#navSignIn):first-of-type{border-top:0;}

/* ── the site footer: F3, the disclaimer leads (legal_trial.html) ─────────────
   Injected by nav.js at the end of <body> on every page, so no page is edited. The
   unofficial-fan-site line comes first on purpose; the four legal links sit under it. */
.site-foot{margin-top:48px;background:#0b0d13;border-top:1px solid rgba(255,255,255,.08);
  width:100%;box-sizing:border-box;flex:0 0 auto;}
.site-foot .f3{padding:22px 24px;text-align:center;max-width:820px;margin:0 auto;}
.site-foot .disc{font-family:Inter,system-ui,sans-serif;font-size:.74rem;line-height:1.7;color:#6c7484;margin:0 0 12px;}
.site-foot .disc b{color:#9aa3b4;font-weight:600;}
.site-foot .links{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;}
.site-foot .links a{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:1px;
  color:#9aa3b4;text-decoration:none;text-transform:uppercase;transition:color .15s;}
.site-foot .links a:hover,.site-foot .links a.on{color:var(--acc,#FFD84A);}
.site-foot .fbot{border-top:1px solid rgba(255,255,255,.08);padding:13px 24px;text-align:center;
  font-family:Inter,system-ui,sans-serif;font-size:.7rem;line-height:1.6;color:#6c7484;}


/* A SIGNED-IN-ONLY MENU ENTRY. Dimmed, with a padlock after the label; it still reacts to the
   pointer because pressing it explains why rather than doing nothing. */
.nav-dd-menu a.locked{color:var(--text-dim,#8a93a8);}
.nav-dd-menu a.locked:hover{color:#cfd6e4;}
.nav-dd-menu a .lk{display:inline-flex;align-items:center;margin-left:7px;vertical-align:-2px;opacity:.75;}
.nav-dd-menu a .lk svg{width:12px;height:12px;}
.nav-dd-menu a:not(.locked) .lk{display:none;}


/* ═══ CLOSE / CLEAR BUTTONS (✕) — ONE LOOK SITE-WIDE ═══════════════════════════════════
   X1 of xbtn_trial.html at size M (owner, 10 Oct 2026): no plate, a light-grey ✕ that turns gold
   over a faint gold circle on hover. Two sizes:
     clear   (search-box clears)               28 x 28, 14px ✕
     close   (popup / panel / drawer close)    34 x 34, 18px ✕
   Lives here because every page with a ✕ links nav.css (x_buttons.html lists them all).
   !important because each page's own rule is more specific. `display` is NOT forced: several are
   shown/hidden with [hidden] or style.display, and forcing it would show them.
   NOT here, on purpose: the REMOVE ✕ (buttons.css's red disc -- tier-row delete, chip remove …),
   detail's labelled "✕ CLOSE" plate, and dokkandle's clear-guess button. */
.search .x, .sm-search .x, .ev-search-x, .bf-sx, .sb-x, .q-x, .gsearch .x, .mx, .it-x, .what-x, .smb-x, .mm-x, .drawer-close, .pk-x, .fx-pick h4 button, .box-x, .fclose, .motion-x, .modal-x, .anim-modal-close, .dx-close, .x-close, .wp-modal-close, .rates-head .x, .phead .x, .ov > .x {
  width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; line-height: 28px !important; text-align: center !important;
  align-items: center !important; justify-content: center !important;
  font-size: 0 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-indent: 0 !important;
  color: #aeb4c0 !important; text-shadow: none !important; filter: none !important;
  background: none !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important;
  cursor: pointer; transition: color .15s, background-color .15s !important;
}
.mx, .it-x, .what-x, .smb-x, .mm-x, .drawer-close, .pk-x, .fx-pick h4 button, .box-x, .fclose, .motion-x, .modal-x, .anim-modal-close, .dx-close, .x-close, .wp-modal-close, .rates-head .x, .phead .x, .ov > .x { width: 34px !important; height: 34px !important; line-height: 34px !important; }
/* THE GLYPH IS DRAWN HERE, not by the page's text: pages wrote ×, ✕ or &times;, and × draws far smaller
   than ✕ at the same size, so the text is hidden (font-size 0 above) and ::before draws one ✕ for all.
   Some of these carried a plate or drawn lines on ::before / ::after -- every one of those props is reset. */
.search .x::before, .sm-search .x::before, .ev-search-x::before, .bf-sx::before, .sb-x::before, .q-x::before, .gsearch .x::before, .mx::before, .it-x::before, .what-x::before, .smb-x::before, .mm-x::before, .drawer-close::before, .pk-x::before, .fx-pick h4 button::before, .box-x::before, .fclose::before, .motion-x::before, .modal-x::before, .anim-modal-close::before, .dx-close::before, .x-close::before, .wp-modal-close::before, .rates-head .x::before, .phead .x::before, .ov > .x::before {
  content: '\2715' !important; display: inline !important; position: static !important; inset: auto !important;
  width: auto !important; height: auto !important; margin: 0 !important; transform: none !important;
  background: none !important; border: 0 !important; box-shadow: none !important; filter: none !important;
  opacity: 1 !important; z-index: auto !important; font-family: 'Segoe UI Symbol', 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important; line-height: 28px !important; color: inherit !important;
}
.mx::before, .it-x::before, .what-x::before, .smb-x::before, .mm-x::before, .drawer-close::before, .pk-x::before, .fx-pick h4 button::before, .box-x::before, .fclose::before, .motion-x::before, .modal-x::before, .anim-modal-close::before, .dx-close::before, .x-close::before, .wp-modal-close::before, .rates-head .x::before, .phead .x::before, .ov > .x::before { font-size: 18px !important; line-height: 34px !important; }
.search .x::after, .sm-search .x::after, .ev-search-x::after, .bf-sx::after, .sb-x::after, .q-x::after, .gsearch .x::after, .mx::after, .it-x::after, .what-x::after, .smb-x::after, .mm-x::after, .drawer-close::after, .pk-x::after, .fx-pick h4 button::after, .box-x::after, .fclose::after, .motion-x::after, .modal-x::after, .anim-modal-close::after, .dx-close::after, .x-close::after, .wp-modal-close::after, .rates-head .x::after, .phead .x::after, .ov > .x::after { content: none !important; }
.search .x:hover, .sm-search .x:hover, .ev-search-x:hover, .bf-sx:hover, .sb-x:hover, .q-x:hover, .gsearch .x:hover, .mx:hover, .it-x:hover, .what-x:hover, .smb-x:hover, .mm-x:hover, .drawer-close:hover, .pk-x:hover, .fx-pick h4 button:hover, .box-x:hover, .fclose:hover, .motion-x:hover, .modal-x:hover, .anim-modal-close:hover, .dx-close:hover, .x-close:hover, .wp-modal-close:hover, .rates-head .x:hover, .phead .x:hover, .ov > .x:hover { color: var(--acc,#FFD84A) !important; background: rgba(var(--acc-rgb,255,216,74), .12) !important; }
/* The corner ✕ in the item-page, support-memories and events search bars is ABSOLUTELY placed
   (right 11px, top 8px) -- spots picked for the old 9px glyph. At 28px it sat on the magnifier and
   off-centre (owner, 10 Oct 2026). Pin it to the right end, centred, and give the bar the room. */
.search > .x, .sm-search > .x, .ev-search > .ev-search-x {
  right: 4px !important; left: auto !important; top: 50% !important; bottom: auto !important;
  transform: translateY(-50%) !important; margin: 0 !important;
}
.search:has(> .x), .sm-search, .ev-search:has(> .ev-search-x) { padding-right: 38px !important; }


/* ═══ BACK BUTTONS — ONE LOOK SITE-WIDE ═══════════════════════════════════════════════
   banner.html's ‹ ALL BANNERS (owner, 11 Oct 2026: "make their style like all banners"): a near-black
   skewed plate with a gold edge, uppercase Rajdhani (WHITE since 15 Oct 2026), a gold glow on hover, and the ‹ arrow.
   Any back button just adds class="house-back". The plate is a ::before so the label stays upright
   whatever the element is (a, button, div). Tag-qualified + !important because buttons.css and the
   pages' own rules (.dia-btn, .ch-back, .cb-back, .nbtn.ang …) load later or are more specific.
   detail.html's ◄ BACK is NOT one of these: it wears the card's type glow (owner, 10 Oct 2026). */
:is(a,button,div).house-back {
  position: relative !important; isolation: isolate !important;
  width: fit-content !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important;
  padding: 9px 20px !important; font-family: 'Rajdhani', sans-serif !important; font-size: .8rem !important;
  margin-left: 0 !important; margin-right: auto !important; align-self: flex-start !important;   /* bigger + LEFT (owner, 11 Oct 2026) */
  font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important;
  line-height: 1.2 !important; white-space: nowrap !important; text-decoration: none !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;   /* WHITE (owner, 15 Oct 2026) */
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: none !important; clip-path: none !important; filter: none !important; opacity: 1 !important; cursor: pointer;
}
:is(a,button,div).house-back > span { transform: none !important; display: inline !important; }
:is(a,button,div).house-back::before {
  content: '' !important; display: block !important; position: absolute !important; inset: 0 !important;
  width: auto !important; height: auto !important; z-index: -1 !important; transform: skewX(-12deg) !important;
  border-radius: 4px !important; 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) !important;
  border: 1px solid rgba(var(--acc-rgb,255,216,74),var(--btn-edge-a)) !important; opacity: 1 !important; filter: none !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
:is(a,button,div).house-back::after { content: none !important; }
:is(a,button,div).house-back:hover { color: #fff !important; transform: none !important; }
:is(a,button,div).house-back:hover::before { border-color: var(--acc,#FFD84A) !important; box-shadow: 0 0 16px rgba(var(--acc-deep-rgb,244,165,0), .35) !important; }

/* ═══ STICKY HEADER BAR ═══════════════════════════════════════════════════════════════
   What a page is ABOUT stays on screen while its list scrolls (owner, 11 Oct 2026): a link's
   LINK + gold plate, the category picture on categories / category buffs, an Ultimate Clash
   stage's banner. It sits under the sticky site header (72px, 60px at 1500px and below).
   The background runs the full width of the window (box-shadow spread + clip-path), so cards
   scroll UNDER a solid bar rather than showing past its edges. */
/* !important: a page's own rule for the same header (category_buffs' phone .cb-cat-head{position:relative}) loads later */
.sticky-bar{position:sticky !important;top:72px !important;z-index:150;
  background:var(--bg,#1C1E26);box-shadow:0 0 0 100vmax var(--bg,#1C1E26);clip-path:inset(0 -100vmax);
  padding-top:10px;padding-bottom:12px;}
/* A SOLID SITE-COLOUR LINE along the bottom, the full width of the window, so the bar and the page scrolling
   under it are clearly apart (owner, 15 Oct 2026). It is a border-image pushed out sideways by
   border-image-outset: what a border image draws outside its box is ink overflow and never makes the page
   scroll sideways (a wide ::after would). The old faint 1px line inside the page width is gone. */
/* IT APPEARS WHEN IT STICKS (owner, 15 Oct 2026: "should appear from nowhere with animation"): at rest the bar
   is just the page; once nav.js marks it .is-stuck, its panel fades in (a shade lighter than the page) and
   the line DRAWS OUT FROM THE CENTRE to both edges of the window. The line's half-width is --sb-w, a
   registered property so it can be animated inside the border-image's gradient. */
@property --sb-w{syntax:'<percentage>';inherits:false;initial-value:0%;}
:root{--sb-bg:#12151d;}   /* the site header's dark, so a stuck bar reads as part of it (owner, 15 Oct 2026: the old grey #23262f looked out of place) */
.sticky-bar{border-bottom:2px solid transparent !important;
  border-image:linear-gradient(90deg,transparent calc(50% - var(--sb-w)),var(--acc,#FFD84A) calc(50% - var(--sb-w)),
    var(--acc,#FFD84A) calc(50% + var(--sb-w)),transparent calc(50% + var(--sb-w))) 0 0 1 0 / 0 0 2px 0 / 0 100vmax 0 100vmax;
  transition:--sb-w .55s cubic-bezier(.2,.8,.25,1),background-color .3s ease,box-shadow .3s ease;}
.sticky-bar.is-stuck{--sb-w:50%;background:var(--sb-bg);box-shadow:0 0 0 100vmax var(--sb-bg);}
.sticky-bar::after{content:none !important;}
/* THE X (owner, 15 Oct 2026: "closable sticky bars"): only while stuck; a closed bar scrolls away with the page and
   sticks again once you scroll back up to it (nav.js). */
.sticky-bar > .stk-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:5;display:none;
  width:28px;height:28px;border-radius:50%;padding:0;align-items:center;justify-content:center;cursor:pointer;
  background:#0d1017;color:#fff;border:1px solid rgba(var(--acc-rgb,255,216,74),.6);
  box-shadow:0 2px 8px rgba(0,0,0,.6);transition:border-color .15s,box-shadow .15s;}
.sticky-bar > .stk-x:hover{border-color:var(--acc,#FFD84A);box-shadow:0 0 12px rgba(var(--acc-deep-rgb,244,165,0),.5);}
.sticky-bar.is-stuck > .stk-x{display:flex;}
.sticky-bar.sb-off{position:relative !important;top:auto !important;}
/* A STUCK BAR ON A PHONE is tighter, so it does not eat the screen; the boss header also drops its event line */
@media (max-width:700px){
  .sticky-bar.is-stuck{padding-top:6px !important;padding-bottom:7px !important;}
  .sticky-bar.is-stuck > .stk-x{right:8px;width:26px;height:26px;}
  .vt-boss.sticky-bar.is-stuck{font-size:1.05rem !important;line-height:1.15;padding-left:40px !important;padding-right:40px !important;}
  .vt-boss.sticky-bar.is-stuck .vt-ev{display:none !important;}
}
@media (prefers-reduced-motion:reduce){ .sticky-bar{transition:none;} }
@media (max-width:1500px){ .sticky-bar{top:60px !important;} }


/* ═══ BUTTON STYLE: GLOWY (default) / DARK -- Settings > Buttons (owner, 11 Oct 2026) ════════════════════
   nav.js puts `btn-dark` on <html> for the dark choice. Every button that follows the choice draws itself as
     background: linear-gradient(rgba(<colour>, var(--btn-tint)) x2), var(--btn-base);
     border-color: rgba(<colour>, var(--btn-edge-a));
   where <colour> is the SITE colour (--acc-rgb) or, on a card page, the card's TYPE colour (--theme-rgb).
   The variables carry NO colour themselves, so a page that pins its own accent (frontier stays gold) still
   tints with its own colour. GLOWY: a 12% tint, no plate, a strong edge (the hover glow is each button's own).
   DARK: no tint on the near-black B1 plate, a softer edge. */
:root{--btn-tint:.12;--btn-base:linear-gradient(transparent,transparent);--btn-edge-a:.8;}
html.btn-dark{--btn-tint:0;--btn-base:linear-gradient(180deg,#151821,#08090d);--btn-edge-a:.45;}

/* ═══ OFF BUTTONS = OF2 DIMMED (offbtn_trial.html, owner 15 Oct 2026: "all of them should be the type I choose") ═══
   A button that is NOT picked: grey text, a faint site-colour plate, a soft site-colour edge; hover -> white text and
   a full edge. The PICKED look of each group is left as it is. Groups: Summons filters, page numbers, the games'
   DAILY / CHALLENGE, news tabs, community / my saves tabs + chips, item filters, Settings + Character Box choices,
   leaderboard games, the filter drawer's chips, event + mission tabs. NOT: card pages and Frontier (their own
   colours -- <html data-own-colour>), the team builder's sliding switch, toggle switches. */
html:not([data-own-colour]) :is(.gfilter .gbtn, .pager button, .pager-btn, .pg-btn, .pnum, .mode, .tabs button:not(.tab), .chips:not(.icons) button, .tabbar .tab, .seg:not(.icon-seg) button:not(.tb-mode *), .games .gbtn, .fopts .chip):not(.on):not(.active):not(.sel):not(:disabled){color:#b9bfcc !important;text-shadow:none !important;}
html:not([data-own-colour]) :is(.gfilter .gbtn, .pager button, .pager-btn, .pg-btn, .pnum, .mode, .tabs button:not(.tab), .chips:not(.icons) button, .tabbar .tab, .seg:not(.icon-seg) button:not(.tb-mode *), .games .gbtn, .fopts .chip):not(.on):not(.active):not(.sel):not(:disabled)::before{background:rgba(var(--acc-rgb,255,216,74),.05) !important;border:1px solid rgba(var(--acc-rgb,255,216,74),.4) !important;
  box-shadow:none !important;filter:none !important;}
html:not([data-own-colour]) :is(.gfilter .gbtn, .pager button, .pager-btn, .pg-btn, .pnum, .mode, .tabs button:not(.tab), .chips:not(.icons) button, .tabbar .tab, .seg:not(.icon-seg) button:not(.tb-mode *), .games .gbtn, .fopts .chip):not(.on):not(.active):not(.sel):not(:disabled):hover{color:#fff !important;}
html:not([data-own-colour]) :is(.gfilter .gbtn, .pager button, .pager-btn, .pg-btn, .pnum, .mode, .tabs button:not(.tab), .chips:not(.icons) button, .tabbar .tab, .seg:not(.icon-seg) button:not(.tb-mode *), .games .gbtn, .fopts .chip):not(.on):not(.active):not(.sel):not(:disabled):hover::before{border-color:var(--acc,#FFD84A) !important;box-shadow:0 0 12px rgba(var(--acc-deep-rgb,244,165,0),.35) !important;}
/* the two tab rows whose plate is the button itself (their ::before is a sliding fill, and the left stripe keeps its colour) */
html:not([data-own-colour]) :is(.ev-tabs .ev-tab, .tabs .tab):not(.on):not(.active):not(.sel):not(:disabled){color:#b9bfcc !important;background:rgba(var(--acc-rgb,255,216,74),.05) !important;
  border-top-color:rgba(var(--acc-rgb,255,216,74),.4) !important;border-right-color:rgba(var(--acc-rgb,255,216,74),.4) !important;
  border-bottom-color:rgba(var(--acc-rgb,255,216,74),.4) !important;}
html:not([data-own-colour]) :is(.ev-tabs .ev-tab, .tabs .tab):not(.on):not(.active):not(.sel):not(:disabled):hover{color:#fff !important;border-top-color:var(--acc,#FFD84A) !important;border-right-color:var(--acc,#FFD84A) !important;
  border-bottom-color:var(--acc,#FFD84A) !important;}
/* the bell's Updates heading: centred, Black Han Sans (owner, 16 Oct 2026) */
.bell-head{justify-content:center;font-family:'Black Han Sans',sans-serif !important;font-weight:400 !important;font-size:.8rem;}