/* ==========================================================
   BADGE
   Arcade UI Kit — flat tag / starburst sticker
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    min-height:26px;

    padding:0 10px;

    border:2px solid var(--ink);

    border-radius:var(--radius-sm);

    background:var(--surface);

    color:var(--ink);

    font-family:inherit;

    font-size:var(--font-size-xs);

    font-weight:700;

    line-height:1;

    letter-spacing:.02em;

    text-transform:uppercase;

    white-space:nowrap;

}


/* ==========================================================
   ICON / DOT
========================================================== */

.badge__icon{

    width:14px;
    height:14px;

    display:block;

    flex-shrink:0;

    object-fit:contain;

}

.badge__dot{

    width:7px;
    height:7px;

    flex-shrink:0;

    border-radius:50%;

    background:currentColor;

}


/* ==========================================================
   VARIANTS
========================================================== */

.badge--default{ background:var(--surface); color:var(--ink); border-color:var(--ink); }
.badge--primary{ background:var(--primary); color:#FFFFFF; border-color:var(--ink); }
.badge--secondary{ background:var(--secondary); color:var(--ink); border-color:var(--ink); }
.badge--success{ background:var(--success); color:#FFFFFF; border-color:var(--ink); }
.badge--warning{ background:var(--warning); color:var(--ink); border-color:var(--ink); }
.badge--danger{ background:var(--danger); color:#FFFFFF; border-color:var(--ink); }

.badge--primary .badge__icon,
.badge--success .badge__icon,
.badge--danger .badge__icon{ filter:brightness(0) invert(1); }


/* ==========================================================
   SIZES
========================================================== */

.badge--sm{ min-height:20px; padding:0 8px; gap:5px; font-size:10px; }
.badge--sm .badge__icon{ width:12px; height:12px; }
.badge--sm .badge__dot{ width:6px; height:6px; }

.badge--md{ min-height:26px; padding:0 10px; gap:6px; font-size:var(--font-size-xs); }
.badge--md .badge__icon{ width:14px; height:14px; }
.badge--md .badge__dot{ width:7px; height:7px; }

.badge--lg{ min-height:32px; padding:0 13px; gap:7px; font-size:13px; }
.badge--lg .badge__icon{ width:16px; height:16px; }
.badge--lg .badge__dot{ width:8px; height:8px; }


/* ==========================================================
   OUTLINE
========================================================== */

.badge--outline{ background:var(--surface); }
.badge--outline.badge--default{ color:var(--ink); border-color:var(--ink); }
.badge--outline.badge--primary{ color:var(--primary); border-color:var(--primary); }
.badge--outline.badge--secondary{ color:color-mix(in srgb, var(--secondary) 70%, var(--ink)); border-color:var(--secondary); }
.badge--outline.badge--success{ color:var(--success); border-color:var(--success); }
.badge--outline.badge--warning{ color:color-mix(in srgb, var(--warning) 70%, var(--ink)); border-color:var(--warning); }
.badge--outline.badge--danger{ color:var(--danger); border-color:var(--danger); }

.badge--outline .badge__icon{ filter:none; }


/* ==========================================================
   DOT ONLY
========================================================== */

.badge--dot{ width:26px; height:26px; min-height:26px; padding:0; border-radius:50%; }
.badge--dot.badge--sm{ width:20px; height:20px; }
.badge--dot.badge--lg{ width:32px; height:32px; }


/* ==========================================================
   STARBURST
   Flat 8-point sticker shape — classic arcade "NEW!" /
   "BONUS!" call-out. No border-radius pill available here,
   it lives or dies on the burst silhouette.
========================================================== */

.badge--burst{

    position:relative;

    width:64px;
    height:64px;

    padding:0;

    border:none;

    border-radius:0;

    background:var(--warning);

    color:var(--ink);

    clip-path: polygon(
        50% 0%, 61% 14%, 79% 6%, 82% 25%, 100% 29%,
        93% 47%, 100% 65%, 82% 71%, 77% 90%,
        59% 83%, 50% 100%, 41% 83%, 23% 90%,
        18% 71%, 0% 65%, 7% 47%, 0% 29%,
        18% 25%, 21% 6%, 39% 14%
    );

    font-size:11px;

    text-align:center;

}

.badge--burst.badge--sm{ width:48px; height:48px; font-size:9px; }
.badge--burst.badge--lg{ width:80px; height:80px; font-size:13px; }

.badge--burst.badge--primary{ background:var(--primary); color:#FFFFFF; }
.badge--burst.badge--danger{ background:var(--danger); color:#FFFFFF; }
.badge--burst.badge--success{ background:var(--success); color:#FFFFFF; }


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:480px){

    .badge--lg{ min-height:28px; padding:0 10px; font-size:var(--font-size-xs); }

}