/**
 * Balatro-style Country Badge — Standalone CSS
 * ==============================================
 * Glass/plastic badge with flag + country silhouette mask.
 * Includes: sizes, glass overlay, rarity tiers, tilt support.
 *
 * STRUCTURE:
 *   .country-badge-wrapper  — outer container (sets size, rarity filter)
 *     .country-badge        — flag image masked to country shape
 *     .country-badge-glass  — transparent glass overlay (reflections + cursor light)
 */

/* ===== WRAPPER ===== */
.country-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.country-badge-wrapper:hover {
    transform: scale(1.05);
}

/* ===== SIZES (wrapper) ===== */
.country-badge-wrapper.badge-xs {
    width: 28px; height: 28px;
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1px #000);
}
.country-badge-wrapper.badge-sm {
    width: 48px; height: 48px;
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1.5px #000);
}
.country-badge-wrapper.badge-md {
    width: 84px; height: 84px;
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 2px #000);
}
.country-badge-wrapper.badge-lg {
    width: 120px; height: 120px;
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 2.5px #000);
}
.country-badge-wrapper.badge-xl {
    width: 160px; height: 160px;
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 3px #000);
}

/* ===== FLAG BADGE ===== */
.country-badge {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    /* Optional SVG distortion filter (needs inline SVG) */
    filter: url(#glass-distort);
}
.country-badge.badge-xs { width: 22px; height: 22px; }
.country-badge.badge-sm { width: 36px; height: 36px; }
.country-badge.badge-md { width: 68px; height: 68px; }
.country-badge.badge-lg { width: 100px; height: 100px; }
.country-badge.badge-xl { width: 136px; height: 136px; }

/* ===== GLASS OVERLAY ===== */
.country-badge-glass {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    pointer-events: none;

    /* Multi-layer glass reflections */
    background:
        radial-gradient(ellipse 40% 20% at 25% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(ellipse 15% 10% at 65% 25%, rgba(255,255,255,0.35) 0%, transparent 100%),
        linear-gradient(155deg,
            rgba(255,255,255,0.25) 0%,
            rgba(255,255,255,0.08) 35%,
            rgba(255,255,255,0) 50%,
            rgba(0,0,0,0.03) 65%,
            rgba(0,0,0,0.08) 100%),
        linear-gradient(to bottom,
            rgba(255,255,255,0.15) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,0.1) 100%);

    backdrop-filter: blur(0.3px);
    -webkit-backdrop-filter: blur(0.3px);
}
.country-badge-glass.badge-xs { width: 22px; height: 22px; }
.country-badge-glass.badge-sm { width: 36px; height: 36px; }
.country-badge-glass.badge-md { width: 68px; height: 68px; }
.country-badge-glass.badge-lg { width: 100px; height: 100px; }
.country-badge-glass.badge-xl { width: 136px; height: 136px; }

/* ===== RARITY TIERS ===== */

/* Common — Desaturated, muted */
.country-badge-wrapper.rarity-common {
    filter: grayscale(.55) brightness(.9) drop-shadow(0 0 1px rgba(0,0,0,.5));
    opacity: .75;
}
.country-badge-wrapper.rarity-common:hover {
    filter: grayscale(.55) brightness(.9) drop-shadow(0 0 1px rgba(0,0,0,.5));
    opacity: .75;
}

/* Uncommon — Clean standard */
.country-badge-wrapper.rarity-uncommon {
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1px rgba(0,0,0,.5));
    transition: filter .3s ease;
}
.country-badge-wrapper.rarity-uncommon:hover {
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 1px rgba(0,0,0,.5));
}

/* Rare — Soft silver glow */
.country-badge-wrapper.rarity-rare {
    filter: drop-shadow(0 0 1px #b0b0b0) drop-shadow(0 0 3px rgba(192,192,192,.25));
    transition: filter .3s ease;
}
.country-badge-wrapper.rarity-rare:hover {
    filter: brightness(1.08) drop-shadow(0 0 1px #c0c0c0) drop-shadow(0 0 4px rgba(192,192,192,.35));
}

/* Epic — Bronze/Copper metallic */
.country-badge-wrapper.rarity-epic {
    filter: sepia(.4) saturate(1.6) brightness(1.0) contrast(1.05)
            drop-shadow(0 0 1px #cd7f32) drop-shadow(0 0 4px rgba(205,127,50,.3));
    transition: filter .3s ease;
}
.country-badge-wrapper.rarity-epic:hover {
    filter: sepia(.5) saturate(2.0) brightness(1.15) contrast(1.05)
            drop-shadow(0 0 2px #cd7f32) drop-shadow(0 0 10px rgba(205,127,50,.6));
}

/* Legendary — Dominant golden metallic */
.country-badge-wrapper.rarity-legendary {
    filter: grayscale(.4) sepia(.7) saturate(1.3) brightness(1.1) hue-rotate(-15deg)
            drop-shadow(0 0 1px #ffd700) drop-shadow(0 0 4px rgba(255,215,0,.3));
    transition: filter .3s ease;
}
.country-badge-wrapper.rarity-legendary:hover {
    filter: grayscale(.45) sepia(.75) saturate(1.6) brightness(1.2) hue-rotate(-15deg)
            drop-shadow(0 0 2px #ffd700) drop-shadow(0 0 10px rgba(255,215,0,.5));
}

/* Icon — Dominant silver metallic */
.country-badge-wrapper.rarity-icon {
    filter: grayscale(.6) brightness(1.25) contrast(1.1)
            drop-shadow(0 0 1px #c0c0c0) drop-shadow(0 0 4px rgba(192,192,192,.3));
    transition: filter .3s ease;
}
.country-badge-wrapper.rarity-icon:hover {
    filter: grayscale(.65) brightness(1.4) contrast(1.15)
            drop-shadow(0 0 2px #e0e0e0) drop-shadow(0 0 10px rgba(220,220,220,.5));
}

/* ===== TILT WRAPPER (for perspective context) ===== */
.badge-tilt-wrap {
    display: inline-block;
    perspective: 300px;
}
.badge-tilt-wrap .country-badge-wrapper {
    transition: transform .15s ease-out, filter .3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}