/* CFB.gg Celebrations — scoped under .cfbgg-cel so nothing leaks into the JNews theme */
.cfbgg-cel{
  --cel-bg:transparent;       /* inherit the page background */
  --cel-card:#1c1c1f;         /* neutral panel, a touch above page */
  --cel-card-2:#26262b;       /* hover / raised */
  --cel-line:rgba(255,255,255,.07);
  --cel-text:#f1f1f3;
  --cel-dim:#9b9ba3;
  --cel-accent:#3D7BFF;       /* CFB.gg blue accent */
  --cel-accent-2:#5b93ff;     /* lighter blue for carets / hovers */
  --cel-radius:12px;
  color:var(--cel-text);
  font-family:inherit;
  line-height:1.45;
  max-width:1080px;
  margin:0 auto;
}
.cfbgg-cel *{box-sizing:border-box}
.cfbgg-cel button{font-family:inherit;cursor:pointer}

/* controls row: search grows, console + layout toggles sit inline */
.cfbgg-cel__controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.cfbgg-cel__search{flex:1 1 240px;min-width:200px;display:flex;align-items:center;gap:10px;background:var(--cel-card);border:1px solid var(--cel-line);border-radius:10px;padding:11px 14px}
.cfbgg-cel__search svg{flex:0 0 auto;color:var(--cel-dim)}
.cfbgg-cel__q{flex:1;background:none;border:0;outline:none;color:var(--cel-text);font-size:15px}
.cfbgg-cel__q::placeholder{color:var(--cel-dim)}
.cfbgg-cel__console{display:flex;background:var(--cel-card);border:1px solid var(--cel-line);border-radius:10px;padding:4px}
.cfbgg-cel__console button{border:0;background:none;color:var(--cel-dim);padding:8px 16px;border-radius:7px;font-size:13px;font-weight:700;letter-spacing:.02em;transition:.15s;white-space:nowrap}
.cfbgg-cel__console button.is-on{background:var(--cel-accent);color:#fff}
.cfbgg-cel__views{display:flex;background:var(--cel-card);border:1px solid var(--cel-line);border-radius:10px;padding:4px}
.cfbgg-cel__views button{border:0;background:none;color:var(--cel-dim);padding:8px 16px;border-radius:7px;font-size:13px;font-weight:700;letter-spacing:.02em;transition:.15s}
.cfbgg-cel__views button.is-on{background:var(--cel-accent);color:#fff}

/* chips */
.cfbgg-cel__chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cfbgg-cel__chips button{border:1px solid var(--cel-line);background:var(--cel-card);color:var(--cel-dim);padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;transition:.15s}
.cfbgg-cel__chips button.is-on{border-color:var(--cel-accent);color:var(--cel-accent-2);background:rgba(61,123,255,.14)}

.cfbgg-cel__count{font-size:13px;color:var(--cel-dim);margin-bottom:12px}
.cfbgg-cel__count .cfbgg-cel__shown{color:var(--cel-text);font-weight:700}

/* controller-style glyphs (SVG) */
.cfbgg-cel__combo{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:38px}
.cfbgg-cel__glyph{height:32px;width:auto;display:block;flex:0 0 auto;overflow:visible}
.cfbgg-cel__glyph text{font-family:inherit;font-weight:800;font-size:14px;letter-spacing:.01em}

/* bumper / trigger: light squircle with one clipped corner */
.cfbgg-cel__glyph.g-bumper{height:30px}
.cfbgg-cel__glyph.g-bumper path{fill:#e9ecef;stroke:rgba(0,0,0,.35);stroke-width:1}
.cfbgg-cel__glyph.g-bumper text{fill:#15171b}

/* right stick: light circle + outer directional caret */
.cfbgg-cel__glyph.g-stick{height:44px}
.cfbgg-cel__glyph.g-stick circle{fill:#e9ecef;stroke:rgba(0,0,0,.35);stroke-width:1}
.cfbgg-cel__glyph.g-stick text{fill:#15171b;font-size:17px}
.cfbgg-cel__caret{fill:none;stroke:var(--cel-accent-2);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* face buttons: colored circle, console-correct labels */
.cfbgg-cel__glyph.g-face{height:30px}
.cfbgg-cel__glyph.g-face circle{stroke:rgba(0,0,0,.35);stroke-width:1}
.cfbgg-cel__glyph.g-face text{font-weight:800}
.cfbgg-cel__glyph.face-a circle{fill:#3fae5a}
.cfbgg-cel__glyph.face-a text{fill:#04130b}
.cfbgg-cel__glyph.face-b circle{fill:#e2574c}
.cfbgg-cel__glyph.face-b text{fill:#fff}
.cfbgg-cel__glyph.face-x circle{fill:#3d8bff}
.cfbgg-cel__glyph.face-x text{fill:#fff}
.cfbgg-cel__glyph.face-y circle{fill:#f2b933}
.cfbgg-cel__glyph.face-y text{fill:#1a1300}

/* PlayStation face buttons: dark rounded key + drawn symbol in PS colors */
.cfbgg-cel__glyph.g-psface{height:30px}
.cfbgg-cel__pskey{fill:#2a2f3a;stroke:rgba(0,0,0,.35);stroke-width:1}
.cfbgg-cel__pssym{fill:none}

.cfbgg-cel__plus{color:var(--cel-dim);font-weight:700;font-size:14px}
.cfbgg-cel__hint{font-size:11px;color:var(--cel-dim);letter-spacing:.03em;margin-left:2px;white-space:nowrap}

/* category accent color, shared by list + cards */
.cfbgg-cel .cat-stick{--cat:var(--cel-accent)}
.cfbgg-cel .cat-trigger{--cat:var(--cel-accent)}
.cfbgg-cel .cat-bumper{--cat:var(--cel-accent)}
.cfbgg-cel .cat-face{--cat:var(--cel-accent)}

/* LIST */
.cfbgg-cel__list{background:var(--cel-card);border:1px solid var(--cel-line);border-radius:var(--cel-radius);overflow:hidden}
.cfbgg-cel__row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--cel-line);transition:background .12s}
.cfbgg-cel__row:last-child{border-bottom:0}
.cfbgg-cel__row:hover{background:var(--cel-card-2)}
.cfbgg-cel__nm{font-weight:600;font-size:16px}
.cfbgg-cel__nm em{display:block;font-style:normal;font-size:12px;color:var(--cel-dim);font-weight:500;margin-top:2px}

/* CARDS */
.cfbgg-cel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.cfbgg-cel__card{position:relative;background:var(--cel-card);border:1px solid var(--cel-line);border-radius:var(--cel-radius);padding:18px;overflow:hidden;transition:transform .15s,border-color .15s}
.cfbgg-cel__card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)}
.cfbgg-cel__card .cfbgg-cel__type{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--cel-dim)}
.cfbgg-cel__card h3{margin:6px 0 16px;font-size:20px;font-weight:800;letter-spacing:-.01em}

.cfbgg-cel__empty{padding:40px;text-align:center;color:var(--cel-dim);background:var(--cel-card);border:1px solid var(--cel-line);border-radius:var(--cel-radius)}

.cfbgg-cel__foot{margin-top:22px;font-size:13px;color:var(--cel-dim);text-align:center}

@media (max-width:560px){
  .cfbgg-cel__search{flex:1 1 100%}
  .cfbgg-cel__row{grid-template-columns:1fr;gap:10px}
  .cfbgg-cel__row .cfbgg-cel__combo{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .cfbgg-cel__card,.cfbgg-cel__row,.cfbgg-cel__console button,.cfbgg-cel__views button,.cfbgg-cel__chips button{transition:none}
}