/* ─────────────────────────────────────────────────────────────
   STAGE 4 · COMPETE · layout and filter chips
   ───────────────────────────────────────────────────────────── */
.sec-compete { background: radial-gradient(900px 500px at 10% 10%, rgba(217,54,127,.18), transparent 70%), #160b33; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 36px; }
.chip { --c1: var(--gold); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: rgba(17,9,38,.6); border: 1.5px solid color-mix(in srgb, var(--c1) 55%, transparent);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); font: italic 800 .78rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ivory); transition: background .25s, color .25s, transform .25s; }
.chip--flagship { --c1: #f3c35f; } .chip--management { --c1: #5fd8ff; } .chip--cultural { --c1: #ff6fb5; } .chip--sports { --c1: #b48bff; }
.chip__icon { width: 16px; height: 16px; color: var(--c1); }
.chip__icon svg { width: 100%; height: 100%; }
.chip em { font: 400 .66rem/1 var(--f-display); font-style: normal; color: var(--c1); }
.chip:hover { transform: translateY(-2px); }
.chip[aria-pressed="true"] { background: var(--c1); color: #160b33; }
.chip[aria-pressed="true"] .chip__icon, .chip[aria-pressed="true"] em { color: #160b33; }