/* ─────────────────────────────────────────────────────────────────────────────
   filters.css — the search bar, the FILTERS button and the filter drawer's insides.
   Lifted out of timeline.html so dokkan_tracker (and anything else) uses the same
   controls rather than a second hand-rolled set. The drawer's slide itself lives in
   drawer.css; this file is only what sits inside it.
   ───────────────────────────────────────────────────────────────────────────── */
/* ── search + one FILTERS button; everything else lives in the panel ─────────── */
.bar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.search{flex:1;min-width:230px;display:flex;align-items:center;gap:9px;padding:9px 8px 9px 14px;
  border-radius:999px;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.12);
  transition:border-color .15s,background .15s;}
.search:focus-within{border-color:rgba(var(--acc-rgb),.55);background:rgba(0,0,0,.42);}
.search input{flex:1;background:none;border:none;outline:none;color:var(--text);
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.95rem;}
.search input::placeholder{color:var(--text-dim);}
.search input::-webkit-search-cancel-button{display:none;}
.search .ci{color:var(--text-dim);font-size:.9rem;}
/* the clear sits at the END of the bar, inside it */
.q-x{width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:var(--text-dim);cursor:pointer;font-size:.62rem;
  line-height:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.q-x:hover{background:#E8503A;border-color:#E8503A;color:#fff;}
.q-x[hidden]{display:none;}

.filt-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:9px;
  border:none;background:none;cursor:pointer;color:var(--gold);padding:11px 20px;
  font-family:'Oswald',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:1.8px;}
.filt-btn::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);
  border-radius:4px;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);
  transition:border-color .15s;}
.filt-btn:hover::before{border-color:var(--gold);}
.filt-btn .fdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22);
  transition:background .15s;}
.filt-btn .fdot{display:none;}   /* superseded by the icon + .fnum */
.filt-btn .fnum{font-family:'Oswald',sans-serif;font-size:.56rem;color:#1a1205;
  background:var(--gold);border-radius:999px;padding:2px 7px;line-height:1.4;}
.count{margin-left:auto;font-family:'Oswald',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:1.4px;color:var(--text-dim);}

/* ── the filter panel ───────────────────────────────────────────────────────── */
/* the drawer itself now lives in drawer.css / drawer.js, shared with dokkan_tracker */
.fhead{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.ftitle{font-family:'Black Han Sans',sans-serif;font-style:italic;font-size:1.05rem;
  letter-spacing:2.4px;color:var(--gold);}
.fclear{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text-dim);
  font-family:'Oswald',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;transition:color .15s;}
.fclear:hover{color:#E8503A;}
.fclose{width:28px;height:28px;border-radius:8px;background:var(--bg3);
  border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:.8rem;
  line-height:0;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.fclose:hover{background:#E8503A;border-color:#E8503A;color:#fff;}
.fbody{overflow-y:auto;padding:6px 20px 20px;}
.fgrp{padding:7px 0;}
/* the group title is a plate in its own right, not bare text */
.fhdr{position:relative;isolation:isolate;width:100%;display:flex;align-items:center;gap:10px;
  padding:13px 16px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Oswald',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--text-dim);transition:color .15s;}
.fhdr::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);
  border-radius:5px;background:linear-gradient(180deg,#2b3040 0%,#1a1e28 55%,#0d1017 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .16s,filter .16s;}
.fhdr:hover{color:var(--text);}
.fhdr:hover::before{border-color:rgba(var(--acc-rgb),.5);}
.fgrp.open .fhdr{color:var(--gold);}
.fgrp.open .fhdr::before{border-color:var(--gold);filter:brightness(1.1);}
.fname{flex:1;}
.fcnt{font-family:'Oswald',sans-serif;font-size:.56rem;color:#1a1205;background:var(--gold);
  border-radius:999px;padding:2px 8px;line-height:1.4;}
.fcnt:empty{display:none;}
.fchev{font-size:.7rem;transition:transform .18s;}
.fgrp.open .fchev{transform:rotate(180deg);}
/* collapsed by default: opening the panel shows only the group names */
.fwrap{display:none;padding:14px 4px 10px;}
.fgrp.open .fwrap{display:block;animation:fdrop .22s ease both;}
@keyframes fdrop{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
/* each option floats up in turn -- the delay is set per chip in group() */
.fgrp.open .fopts > *{animation:fpop .26s cubic-bezier(.2,.9,.3,1) both;}
@keyframes fpop{from{opacity:0;transform:translateY(10px) scale(.94);}to{opacity:1;transform:none;}}
.fopts{display:flex;flex-wrap:wrap;gap:8px;}
.fopts.cats{gap:6px;max-height:330px;overflow-y:auto;padding-right:6px;}
.fopts.links{max-height:250px;overflow-y:auto;padding-right:6px;}
/* the two long lists get their own find box */
.gsearch{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding:8px 8px 8px 13px;
  border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);}
.gsearch input{flex:1;background:none;border:none;outline:none;color:var(--text);
  font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.88rem;min-width:0;}
.gsearch input::placeholder{color:var(--text-dim);}
.gsearch input::-webkit-search-cancel-button{display:none;}
.gsearch .x{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:var(--text-dim);cursor:pointer;font-size:.58rem;line-height:0;display:flex;
  align-items:center;justify-content:center;transition:all .15s;}
.gsearch .x:hover{background:#E8503A;border-color:#E8503A;color:#fff;}
.gsearch .x[hidden]{display:none;}
.chip.hide{display:none;}

/* Link skills drawn the way links.html draws them: the gold Lv10 plate with the glyph
   stack, scaled down to sit in a filter list. Geometry copied verbatim so they match. */
.fopts.links{gap:8px;}
.lplate-wrap{width:206px;height:50px;background:none;border:none;padding:0;cursor:pointer;
  opacity:.55;transition:opacity .15s,transform .15s;}
.lplate-wrap:hover{opacity:.85;transform:translateY(-2px);}
.lplate-wrap.on{opacity:1;position:relative;}
.lplate-wrap.on::after{content:'✓';position:absolute;top:2px;right:16px;z-index:3;
  width:16px;height:16px;border-radius:50%;background:var(--gold);color:#1a1205;
  font-family:'Oswald',sans-serif;font-size:.52rem;font-weight:700;line-height:16px;
  text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.6);}
.lplate-wrap.on .link-plate{filter:brightness(1.12) drop-shadow(0 0 10px rgba(var(--acc-deep-rgb,244,165,0),.55));}
.link-plate{position:relative;width:250px;height:60px;background-size:250px 60px;
  background-repeat:no-repeat;transform:scale(0.82);transform-origin:top left;
  transition:filter .12s;pointer-events:none;}
.link-plate.lv10{background-image:url('https://assets.dokkantracker.com/frames/linkgold.png');}
.link-plate .lname{position:absolute;top:0;height:100%;display:flex;align-items:center;
  justify-content:center;font-family:'Oswald',sans-serif;font-weight:700;font-size:0.98rem;
  letter-spacing:0.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.85);white-space:nowrap;
  left:56px;right:14px;overflow:hidden;text-overflow:ellipsis;}
.lvstack{position:absolute;left:34.5px;top:31px;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:0;}
.glyphrow{display:flex;align-items:center;justify-content:center;gap:0;height:14px;}
.g{display:inline-block;background-image:url('https://assets.dokkantracker.com/frames/gold2_text.png');
  background-repeat:no-repeat;}
.g.L{width:13.1px;height:14px;background-size:238.9px 238.9px;background-position:-151.7px -0.9px;}
.g.v{width:12.6px;height:14px;background-size:238.9px 238.9px;background-position:-164.3px -0.9px;}
.g.d1{width:8.9px;height:14px;background-size:238.9px 238.9px;background-position:-176.4px -0.9px;}
.g.d0{width:13.1px;height:14px;background-size:238.9px 238.9px;background-position:-70.9px -0.9px;}
.chip{position:relative;isolation:isolate;background:none;border:none;cursor:pointer;
  color:var(--text-dim);font-family:'Oswald',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:1.4px;padding:8px 14px;transition:color .15s;}
.chip::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(255,255,255,.1);transition:border-color .15s;}
.chip:hover{color:var(--text);}
.chip.on{color:#1a1205;}
.chip.on::before{border-color:var(--gold);
  background:linear-gradient(180deg,var(--gold),var(--orange));
  box-shadow:0 2px 9px rgba(var(--acc-deep-rgb,244,165,0),.35);}
/* image chips (type, rarity, category) carry no plate -- the art is the button */
.ichip{position:relative;padding:4px;border-radius:8px;background:none;border:1px solid transparent;
  cursor:pointer;opacity:.42;line-height:0;
  transition:opacity .15s,transform .15s,border-color .15s,background .15s,box-shadow .15s;}
.ichip::before{display:none;}
.ichip:hover{opacity:.8;transform:translateY(-1px);}
/* selected is a gold frame + wash + a tick, not just a change in opacity */
.ichip.on{opacity:1;transform:scale(1.04);border-color:var(--gold);
  background:rgba(var(--acc-rgb),.14);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.35),
  0 4px 12px rgba(0,0,0,.45);}
.ichip.on::after{content:'✓';position:absolute;top:-6px;right:-6px;z-index:3;
  width:16px;height:16px;border-radius:50%;background:var(--gold);color:#1a1205;
  font-family:'Oswald',sans-serif;font-size:.52rem;font-weight:700;line-height:16px;
  text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.6);}
.ichip img{height:34px;width:auto;display:block;object-fit:contain;}
.catchip img{height:52px;}
.ffoot{padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);text-align:center;}
.fdone{position:relative;isolation:isolate;border:none;background:none;cursor:pointer;
  color:var(--gold);padding:11px 26px;font-family:'Black Han Sans',sans-serif;
  font-style:italic;font-size:.7rem;letter-spacing:1.6px;text-transform:uppercase;}
.fdone::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),.5);}
.fdone:hover::before{border-color:var(--gold);}
.fdone b{color:#fff;}

/* ═══ F1 — QUIET UNTIL IT HAS SOMETHING TO SAY ═════════════════════════════════
   Picked from filtbtn_trial.html. The plate that shipped before this glowed whether or
   not anything was filtered, so the glow carried no information. Now it is the ordinary
   house plate at rest and the G6 illumination ONLY when filters are applied.

   The shape is untouched — still the skewed ::before it always was. */
.filt-btn{color:#fff !important;text-shadow:none;}   /* Glowy, white (owner ticked it, 15 Oct 2026) */
.filt-btn::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);
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.filt-btn:hover{color:#fff !important;}
.filt-btn:hover::before{border-color:rgba(var(--acc-rgb,255,216,74),.55);}

/* the icon takes the button's colour through currentColor, so it turns with every state
   above and below without a single extra declaration */
.filt-btn .fico{width:15px;height:15px;flex:0 0 auto;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* FILTERS ARE APPLIED — this is the state the button exists for */
.filt-btn.on{color:#fff !important;text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.7);}
.filt-btn.on::before{
  background:rgba(var(--acc-rgb,255,216,74),.15);
  border-color:rgba(var(--acc-rgb,255,216,74),.80);
  box-shadow:inset 0 0 14px rgba(var(--acc-rgb,255,216,74),.22);
}
.filt-btn.on:hover::before{
  background:rgba(var(--acc-rgb,255,216,74),.24);
  border-color:var(--acc,#FFD84A);
  box-shadow:inset 0 0 18px rgba(var(--acc-rgb,255,216,74),.34);
}

/* THE HOVER FILLS, matching timeline.html -- which carries its own copy of these rules and
   had gained the filled hover while this sheet still only moved the border colour. A border
   that changes by a shade is not a hover at .74rem; the plate lighting up is. */
.filt-btn:hover::before{
  background:rgba(var(--acc-rgb,255,216,74),.24);
  border-color:var(--acc,#FFD84A);
  box-shadow:inset 0 0 18px rgba(var(--acc-rgb,255,216,74),.34);
}

/* CLEAR ALL is a BUTTON, not a word. It sat as bare text that turned red on hover, beside a
   row of angled plates -- so the one control that throws your filters away was the only thing
   in the drawer that did not look pressable. Same skewed ::before as .filt-btn, one size down,
   and it keeps `margin-left:auto` so it still sits at the end of the head row. */
.fclear{position:relative;isolation:isolate;margin-left:auto;background:none;border:none;
  cursor:pointer;color:#9aa3b4;font-family:'Rajdhani',sans-serif;font-weight:700;
  font-size:.74rem;letter-spacing:1.2px;text-transform:uppercase;padding:7px 14px;
  transition:color .16s;}
.fclear::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(255,255,255,.14);
  box-shadow:0 2px 7px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .16s,border-color .16s,box-shadow .16s;}
/* it DISCARDS things, so its hover is the warning colour rather than the accent -- the one
   place in the drawer where that distinction is worth keeping */
.fclear:hover{color:#fff;}
.fclear:hover::before{background:rgba(232,80,58,.22);border-color:rgba(232,80,58,.75);
  box-shadow:inset 0 0 18px rgba(232,80,58,.30);}

/* 24 Sep -- ONE CLEAR BUTTON, site-wide: teambuilder's picker CLEAR (.pk-fclr) is the
   reference. Flat #12151d plate, grey label, soft red on hover, a small press. */
.fclear{color:#aeb4c0;font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:1.5px;
  transition:color .15s,transform .1s;}
.fclear::before{background:#12151d;border:1px solid rgba(255,255,255,.12);box-shadow:0 2px 7px rgba(0,0,0,.45);
  filter:none;transition:border-color .15s,background .15s;}
.fclear:hover{color:#f3d6d6;}
.fclear:hover::before{background:rgba(232,96,96,.10);border-color:rgba(232,96,96,.5);box-shadow:0 2px 7px rgba(0,0,0,.45);filter:none;}
.fclear:active{transform:scale(.96);}

/* 2 OCT 2026 (owner) -- CATEGORIES TWO A ROW, 36px tall (option S2 of filters_trial.html: 12 in view
   where one a row at 52px showed 5), and LINK SKILLS TWO A ROW too: the 250 x 60 plate scaled by
   --lps so two fit the drawer (.78 = 195 x 47 on a computer, smaller on a phone). A chip the find box
   hides must stay hidden whatever display these give it -- and the link plates never had a hide rule
   at all, only `.chip.hide`. */
.fopts .hide{display:none !important;}
.fopts.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.fopts.cats .catchip{display:flex;justify-content:center;}
.fopts.cats .catchip img{height:auto;width:auto;max-height:36px;max-width:100%;}
.fopts.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px;justify-items:center;--lps:.78;}
.fopts.links .lplate-wrap{width:calc(250px * var(--lps));height:calc(60px * var(--lps));}
.fopts.links .link-plate{transform:scale(var(--lps));}
/* A NARROW DRAWER KEEPS ONE A ROW: tier list and diamond give the list ~266px and a phone ~296, where two
   plates would come out ~130px wide with ~8px names. The group's own width decides (a container query on
   .fwrap), so the card grid's 405px drawer gets two a row and a narrow one stays readable. */
.fgrp .fwrap{container-type:inline-size;}
@container (max-width:399px){
  .fopts.cats,.fopts.links{grid-template-columns:minmax(0,1fr);}
}

/* ===== 2 Oct 2026 (owner) -- SHARED with timeline.html's inline copy of this sheet: change BOTH ===== */
/* THE COUNT is option C2 of filters_trial.html: the site's angled plate in gold with the number upright on
   it, in Inter's digits (centred within half a pixel; Oswald's 1 sat 1.5px left) and with NO glow -- the lit
   FILTERS button's text-shadow reached the number and blurred it. The face holds only the space and 0-9. */
@font-face{font-family:'DT Count';src:url('fonts/Inter-800-latin.woff2') format('woff2');font-weight:800;
  font-display:block;unicode-range:U+0020,U+0030-0039;}
.fcnt,.filt-btn .fnum{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;min-width:24px;height:18px;padding:0 7px;background:none;border-radius:0;color:#1a1205;
  font:800 .64rem 'DT Count','Inter',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1;
  white-space:nowrap;text-shadow:none;}
.fcnt::before,.filt-btn .fnum::before{content:'';position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);
  border-radius:3px;background:linear-gradient(180deg,#ffe58a,#FFD84A 45%,#e8b200);box-shadow:0 1px 3px rgba(0,0,0,.55);}
.fcnt:empty{display:none;}
.filt-btn .fnum[hidden]{display:none;}
/* THE TICK on a category and on a link skill, placed by the owner in filters_trial.html's tuner. Each pair is
   an offset from the ART's top-right corner (x across, y down; negative hangs it outside) and the disc's
   size (tuned 2 Oct 2026). card_creator.html's picker carries the same six, kept equal. A category chip hugs
   its art (4px padding),
   so the tick is measured from the picture, not from the grid cell. */
:root{--ctk-x:-2.5px;--ctk-y:-4.5px;--ctk-s:16px;--ltk-x:2px;--ltk-y:1.5px;--ltk-s:16px;}
.fopts.cats .catchip{justify-self:center;}
.ichip.catchip.on::after{top:calc(4px + var(--ctk-y));right:calc(4px + var(--ctk-x));width:var(--ctk-s);
  height:var(--ctk-s);line-height:var(--ctk-s);font-size:calc(var(--ctk-s) * .52);}
.lplate-wrap.on::after{top:var(--ltk-y);right:var(--ltk-x);width:var(--ltk-s);height:var(--ltk-s);
  line-height:var(--ltk-s);font-size:calc(var(--ltk-s) * .52);}
/* A PICKED category or link skill has NO glow and no frame (owner, 2 Oct 2026: option B of
   glow_trial.html, "no glow is better") -- the tick marks it, and a link plate is a touch brighter.
   The card creator's picker does the same. */
.ichip.catchip.on{transform:none;border-color:transparent;background:none;box-shadow:none;}
.lplate-wrap.on .link-plate{filter:brightness(1.12);}

/* 8 Oct 2026 (owner) -- TYPE is class + type: ten badges, Super AGL..PHY on the first row and Extreme
   AGL..PHY on the second. Five columns whatever the drawer's width (a 44px chip x 5 fits the narrowest). */
.fopts.types{display:grid;grid-template-columns:repeat(5,max-content);justify-content:center;gap:8px 10px;}

/* ===== 15 Oct 2026 (owner) -- THE DRAWER IS N5 (D5 "NEON") of filterlook_trial.html, a picked word button
   is P1 (LIT). SHARED with timeline.html's inline copy of this sheet: change BOTH.
   - the panel near-black with a glowing site-colour edge down its left
   - the GROUP TITLES (Rarity, Skills ...) on a lighter plate than the panel (owner: "another color from
     the background of it"); an open one lit, its word glowing
   - the WORD BUTTONS drawn like the tooltip (owner: "like the tooltips with site colour outlines, white
     text and bigger"): Rajdhani 700, white, a site-colour edge and a faint glow
   - PICKED (P1): a wash of the site colour, the full-colour edge and a glow round it, the word glowing
   - THE COUNT (the "1" on a group title and on FILTERS) in the SITE COLOUR, its digit in --acc-ink
   - no hover tooltips anywhere in the drawer (data-tipoff on the panel: filters.js / timeline.html) */
.fmodal .fpanel,.filter-modal-overlay .filter-modal{background:#141821;   /* a little less dark (owner, 15 Oct 2026; was #0b0d12) */
  border-left:2px solid var(--acc,#FFD84A);
  box-shadow:-6px 0 24px rgba(var(--acc-rgb,255,216,74),.25),-18px 0 46px rgba(0,0,0,.6);}
@media (max-width:560px){ .fmodal .fpanel,.filter-modal-overlay .filter-modal{background:rgba(20,24,33,.93);} }
.ftitle{color:var(--acc,#FFD84A);text-shadow:0 0 12px rgba(var(--acc-rgb,255,216,74),.7);}
.fhdr{color:#d5dae5;font-family:'Rajdhani',sans-serif;font-size:.86rem;font-weight:700;letter-spacing:1.8px;}
.fhdr::before{background:linear-gradient(180deg,#2a2f3d 0%,#1d212b 60%,#161920 100%);
  border:1px solid rgba(var(--acc-rgb,255,216,74),.3);
  box-shadow:0 2px 7px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);}
.fhdr:hover{color:#fff;}
.fhdr:hover::before{border-color:rgba(var(--acc-rgb,255,216,74),.6);}
.fgrp.open .fhdr{color:#fff;text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.8);}
.fgrp.open .fhdr::before{border-color:var(--acc,#FFD84A);filter:none;
  box-shadow:0 0 12px rgba(var(--acc-rgb,255,216,74),.5),inset 0 1px 0 rgba(255,255,255,.07);}
.fopts{gap:10px 12px;}
.fopts .chip{color:#fff;font-family:'Rajdhani',sans-serif;font-size:.88rem;font-weight:700;letter-spacing:.8px;
  padding:9px 17px;transition:transform .12s,color .15s;}
.fopts .chip::before{background:#191d27;border:1px solid rgba(var(--acc-rgb,255,216,74),.6);
  box-shadow:0 0 8px rgba(var(--acc-rgb,255,216,74),.25),inset 0 0 12px rgba(var(--acc-rgb,255,216,74),.18);
  transition:border-color .15s,box-shadow .15s,background .15s;}
.fopts .chip:hover{color:#fff;transform:translateY(-1px);}
.fopts .chip:hover::before{border-color:var(--acc,#FFD84A);
  box-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.35),inset 0 0 18px rgba(var(--acc-rgb,255,216,74),.28);}
.fopts .chip.on{color:#fff;text-shadow:0 0 8px rgba(var(--acc-rgb,255,216,74),.8);}
.fopts .chip.on::before{background:linear-gradient(180deg,rgba(var(--acc-rgb,255,216,74),.34),rgba(var(--acc-rgb,255,216,74),.12)),#12151d;
  border-color:var(--acc,#FFD84A);box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.55),inset 0 0 16px rgba(var(--acc-rgb,255,216,74),.35);}
/* ICON CHIPS keep their own 4px (owner, 16 Oct 2026: "filters also broken in tier list"). The word-button padding
   above (9px 17px) also hit the TYPE / RARITY / category badges, so five type badges (66px each) no longer fit the
   Tier List / Diamond drawer and were cut off on both sides. */
.fopts .chip.ichip{padding:4px;}
.fdone{color:#fff;text-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.8);}
.fdone::before{background:#191d27;border:1px solid var(--acc,#FFD84A);box-shadow:0 0 14px rgba(var(--acc-rgb,255,216,74),.5);}
.fdone:hover::before{border-color:var(--acc,#FFD84A);box-shadow:0 0 18px rgba(var(--acc-rgb,255,216,74),.7);}
.fcnt,.filt-btn .fnum{color:var(--acc-ink,#1a1205);}
.fcnt::before,.filt-btn .fnum::before{background:linear-gradient(180deg,
  color-mix(in srgb,var(--acc,#FFD84A) 70%,#fff),var(--acc,#FFD84A) 45%,rgba(var(--acc-deep-rgb,244,165,0),1));}
/* ===== 15 Oct 2026 (owner) -- GROUP TITLES = G6 of grouptitle_trial.html: no plate, a white title on a site-
   colour line that fades out to the right; open, the title takes the site colour and the line thickens.
   THE COUNT is TRANSPARENT: no fill, a site-colour outline and digit. SHARED with timeline.html: change BOTH. */
.fhdr{color:#fff;padding:12px 4px;}
.fhdr::before{transform:none;inset:auto 0 4px 0;height:1px;border:0;border-radius:0;
  background:linear-gradient(90deg,rgba(var(--acc-rgb,255,216,74),.75),rgba(var(--acc-rgb,255,216,74),0));box-shadow:none;}
.fhdr:hover::before{background:linear-gradient(90deg,var(--acc,#FFD84A),rgba(var(--acc-rgb,255,216,74),0));}
.fgrp.open .fhdr{color:var(--acc,#FFD84A);}
.fgrp.open .fhdr::before{height:2px;border:0;box-shadow:none;
  background:linear-gradient(90deg,var(--acc,#FFD84A),rgba(var(--acc-rgb,255,216,74),0));}
.fcnt,.filt-btn .fnum{color:#fff;}
.fcnt::before,.filt-btn .fnum::before{background:transparent;border:1px solid var(--acc,#FFD84A);box-shadow:none;}
/* Black Han Sans (owner, 16 Oct 2026, oswald_review.html) */
.filt-btn{font-family:'Black Han Sans',sans-serif !important;font-weight:400 !important;}
/* FILTERS: Black Han Sans caps are shorter than the icon -- centre them on each other (owner, 16 Oct 2026) */
.filt-btn .fico{transform:translateY(-1.4px);}