/* WhoWinsAI — Universe Pill Colours */

/* All pills base transition */
.fpill, .tt-upill, .tfpill, .fusion-filter-pill, .tpf {
  transition: all .15s !important;
}

/* Colour by data-universe attribute — set by JS */
.fpill[data-universe="all"],
.tt-upill[data-universe="all"],
.tfpill[data-universe="all"],
.fusion-filter-pill[data-universe="all"],
.tpf[data-universe="all"] {
  --pc:#a855f7; --pb:rgba(168,85,247,0.15); --pg:rgba(168,85,247,0.3);
}
.fpill[data-universe="marvel"],
.tt-upill[data-universe="marvel"],
.tfpill[data-universe="marvel"],
.fusion-filter-pill[data-universe="marvel"],
.tpf[data-universe="marvel"] {
  --pc:#e62429; --pb:rgba(230,36,41,0.15); --pg:rgba(230,36,41,0.3);
}
.fpill[data-universe="dc"],
.tt-upill[data-universe="dc"],
.tfpill[data-universe="dc"],
.fusion-filter-pill[data-universe="dc"],
.tpf[data-universe="dc"] {
  --pc:#0075f6; --pb:rgba(0,117,246,0.15); --pg:rgba(0,117,246,0.3);
}
.fpill[data-universe="dragonball"],
.tt-upill[data-universe="dragonball"],
.tfpill[data-universe="dragonball"],
.fusion-filter-pill[data-universe="dragonball"],
.tpf[data-universe="dragonball"] {
  --pc:#ff9500; --pb:rgba(255,149,0,0.15); --pg:rgba(255,149,0,0.3);
}
.fpill[data-universe="anime"],
.tt-upill[data-universe="anime"],
.tfpill[data-universe="anime"],
.fusion-filter-pill[data-universe="anime"],
.tpf[data-universe="anime"] {
  --pc:#ff6600; --pb:rgba(255,102,0,0.15); --pg:rgba(255,102,0,0.3);
}
.fpill[data-universe="naruto"],
.tt-upill[data-universe="naruto"],
.tfpill[data-universe="naruto"],
.fusion-filter-pill[data-universe="naruto"],
.tpf[data-universe="naruto"] {
  --pc:#ff4400; --pb:rgba(255,68,0,0.15); --pg:rgba(255,68,0,0.3);
}
.fpill[data-universe="onepiece"],
.tt-upill[data-universe="onepiece"],
.tfpill[data-universe="onepiece"],
.fusion-filter-pill[data-universe="onepiece"],
.tpf[data-universe="onepiece"] {
  --pc:#0099ff; --pb:rgba(0,153,255,0.15); --pg:rgba(0,153,255,0.3);
}
.fpill[data-universe="games"],
.tt-upill[data-universe="games"],
.tfpill[data-universe="games"],
.fusion-filter-pill[data-universe="games"],
.tpf[data-universe="games"] {
  --pc:#00cc44; --pb:rgba(0,204,68,0.15); --pg:rgba(0,204,68,0.3);
}
.fpill[data-universe="scifi"],
.tt-upill[data-universe="scifi"],
.tfpill[data-universe="scifi"],
.fusion-filter-pill[data-universe="scifi"],
.tpf[data-universe="scifi"] {
  --pc:#00ccff; --pb:rgba(0,204,255,0.15); --pg:rgba(0,204,255,0.3);
}
.fpill[data-universe="fantasy"],
.tt-upill[data-universe="fantasy"],
.tfpill[data-universe="fantasy"],
.fusion-filter-pill[data-universe="fantasy"],
.tpf[data-universe="fantasy"] {
  --pc:#cc4400; --pb:rgba(204,68,0,0.15); --pg:rgba(204,68,0,0.3);
}
.fpill[data-universe="history"],
.tt-upill[data-universe="history"],
.tfpill[data-universe="history"],
.fusion-filter-pill[data-universe="history"],
.tpf[data-universe="history"] {
  --pc:#cc9900; --pb:rgba(204,153,0,0.15); --pg:rgba(204,153,0,0.3);
}
.fpill[data-universe="horror"],
.tt-upill[data-universe="horror"],
.tfpill[data-universe="horror"],
.fusion-filter-pill[data-universe="horror"],
.tpf[data-universe="horror"] {
  --pc:#9900cc; --pb:rgba(153,0,204,0.15); --pg:rgba(153,0,204,0.3);
}
.fpill[data-universe="cartoon"],
.tt-upill[data-universe="cartoon"],
.tfpill[data-universe="cartoon"],
.fusion-filter-pill[data-universe="cartoon"],
.tpf[data-universe="cartoon"] {
  --pc:#ffcc00; --pb:rgba(255,204,0,0.15); --pg:rgba(255,204,0,0.3);
}
.fpill[data-universe="liveaction"],
.tt-upill[data-universe="liveaction"],
.tfpill[data-universe="liveaction"],
.fusion-filter-pill[data-universe="liveaction"],
.tpf[data-universe="liveaction"] {
  --pc:#ff69b4; --pb:rgba(255,105,180,0.15); --pg:rgba(255,105,180,0.3);
}

/* Apply colours on hover */
.fpill:hover, .tt-upill:hover, .tfpill:hover, .fusion-filter-pill:hover, .tpf:hover {
  border-color: var(--pc, #a855f7) !important;
  color: var(--pc, #a855f7) !important;
  background: var(--pb, rgba(168,85,247,0.1)) !important;
}

/* Apply colours when active */
.fpill.active, .tt-upill.active, .tfpill.active, .fusion-filter-pill.active, .tpf.active {
  background: var(--pb, rgba(168,85,247,0.15)) !important;
  border-color: var(--pc, #a855f7) !important;
  color: var(--pc, #a855f7) !important;
  box-shadow: 0 0 10px var(--pg, rgba(168,85,247,0.3)) !important;
}

/* Show universe colour ALL THE TIME — not just on hover/active */
.fpill[data-universe],
.tt-upill[data-universe],
.tfpill[data-universe],
.fusion-filter-pill[data-universe],
.tpf[data-universe] {
  border-color: var(--pc, rgba(168,85,247,0.4)) !important;
  color: var(--pc, #a855f7) !important;
  background: transparent !important;
}

/* Active state — filled background */
.fpill.active[data-universe],
.tt-upill.active[data-universe],
.tfpill.active[data-universe],
.fusion-filter-pill.active[data-universe],
.tpf.active[data-universe] {
  background: var(--pb, rgba(168,85,247,0.2)) !important;
  border-color: var(--pc, #a855f7) !important;
  color: var(--pc, #a855f7) !important;
  box-shadow: 0 0 10px var(--pg, rgba(168,85,247,0.3)) !important;
}