.pill-tag-accent {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    border: 2px solid rgba(255, 210, 63, 0.4);
    border-radius: 20px;
    padding: 4px 12px;
    background: transparent;
}

.pill-tag-primary {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-500);
    border: 2px solid var(--primary-500);
    border-radius: 20px;
    padding: 4px 12px;
    background: var(--background-soft);
}

.pill-tag-white {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gray-mid);
    border: 2px solid var(--gray-light);
    border-radius: 20px;
    padding: 4px 12px;
}

.pill-filter {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 2px solid var(--black);
    border-radius: 20px;
    padding: 3px 11px;
    cursor: pointer;
    background: var(--background);
    transition: background 0.12s;
}

.pill-filter.on {
    background: var(--accent);
}

.pill-filter:hover:not(.on) {
    background: var(--background-soft);
}

.badge-season {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--primary-500);
    color: var(--white);
    padding: 3px 8px;
    border-radius: 4px;
}

.badge-season.po {
    background-color: var(--primary-700);
}

.badge-season.done {
    background-color: var(--green);
}

.badge-scenario {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    border: 2px solid var(--black);
    display: inline-block;
}

.badge-scenario.done {
    background: var(--background-green);
    color: var(--green);
}

.badge-scenario.going {
    background: var(--accent);
    color: var(--black);
}

.badge-scenario-new {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--black);
    background: var(--primary-500);
    color: var(--white);
    display: inline-block;
}

.badge-shape {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid;
}

.badge-shape.ok {
    background: var(--background-green);
    color: var(--green);
    border-color: var(--green);
}

.badge-shape.tired {
    background: var(--background-orange);
    color: var(--orange);
    border-color: #F7931E;
}

.badge-shape.injured {
    background: var(--background-red);
    color: var(--red);
    border-color: var(--red);
}

.badge-position {
    width: 24px;
    height: 24px;
    border: 2px solid var(--black);
    border-radius: 5px;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
}

.badge-position.starter {
    background: var(--primary-700);
    border-color: var(--gray-dark);
    color: var(--white);
}

.badge-position.rotation {
    color: var(--black);
    background: var(--accent);
}

.mini-badge-position {
    font-size: 8px;
    font-weight: 800;
    background: var(--background);
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    padding: 1px 3px;
    margin-right: 3px;
    color: var(--gray-mid);
    text-transform: uppercase;
}

.mini-badge-position.starter {
    background: var(--primary-700);
    border-color: var(--gray-dark);
    color: var(--white);
}

.mini-badge-position.rotation {
    background: var(--accent);
    color: var(--black);
}