/* ===== COUNTRY BADGE - REALISTIC GLASS/PLASTIC ===== */
/* SVG filter distortion + layered reflections */

/* ===== SVG FILTER (inline in CSS) ===== */
.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);
}

/* ===== SIZE + THIN OUTLINE ===== */
.country-badge-wrapper.badge-xs {
    width: 28px;
    height: 28px;
    /* drop-shadow removed on xs — 1px outline is invisible at 28px
       and each filter creates a compositing layer (expensive on
       pages with 30+ badges like team detail brackets) */
}
.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;
}

.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 - REALISTIC ===== */
.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 effect */
    background:
        /* Top-left bright reflection spot */
        radial-gradient(ellipse 40% 20% at 25% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
        /* Secondary smaller highlight */
        radial-gradient(ellipse 15% 10% at 65% 25%, rgba(255,255,255,0.35) 0%, transparent 100%),
        /* Main diagonal gradient */
        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%
        ),
        /* Subtle edge highlight */
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.15) 0%,
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,0.1) 100%
        );

    /* backdrop-filter removed — 0.3px blur is imperceptible but
       forces a compositing layer per badge, causing scroll lag
       on pages with many badges (team detail has 40+) */
}

.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; }

/* ===== DISTORTION EFFECT (applied to badge) ===== */
/* Uses SVG filter for subtle refraction */
.country-badge {
    filter: url(#glass-distort);
}

/* ===== RARITY TIERS - BALATRO-STYLE METALLIC ===== */

/* Tier 1 - Common: Desaturated, muted colors still visible */
.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;
}

/* Tier 2 - Uncommon: Standard clean look */
.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));
}

/* Tier 3 - 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));
}

/* Tier 4 - Epic: Bronze/Copper metallic tint */
.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));
}

/* Tier 5 - 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));
}

/* Tier 6 - 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 Balatro-style perspective */
.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;
}

/* ===== COUNTRY-SPECIFIC FLAG ADJUSTMENTS ===== */
/* ZOOM IN = larger % or cover (flag fills shape) */
/* ZOOM OUT = smaller % (shows more of flag, may have gaps) */
/* PAN = background-position shifts which part of flag is visible */

/* Horizontal stripes - slight zoom out to show all bands */
.country-badge[style*="aut"] { background-size: 105% 100%; background-position: center; }
.country-badge[style*="hun"] { background-size: 105% 100%; background-position: center; }
.country-badge[style*="per"] { background-size: 135% 130%; background-position: center; }
.country-badge[style*="frg"] { background-size: 105% 100%; background-position: center; }

/* Vertical stripes - Ireland needs to show all 3 bands */
.country-badge[style*="irl"] { background-size: 130% 135%; background-position: center; }

/* Emblems / complex flags - zoom in more to fill shape */
.country-badge[style*="jpn"] { background-size: 130% 130%; background-position: center; }
.country-badge[style*="wal"] { background-size: 110% 110%; background-position: center; }
.country-badge[style*="can"] { background-size: 140% 140%; background-position: center; }

/* Countries with left-side symbols - pan RIGHT to show left symbols */
.country-badge[style*="svn"] { background-size: 105% 105%; background-position: 45% center; }
.country-badge[style*="svk"] { background-size: 105% 105%; background-position: 45% center; }
.country-badge[style*="sun"] { background-size: 105% 105%; background-position: 50% center; }
.country-badge[style*="swe"] { background-size: 125% 125%; background-position: 45% center; }

/* Qatar - zigzag pattern on left side */
.country-badge[style*="qat"] { background-size: 120% 125%; background-position: 15% center; }

/* Jamaica - zoom in slightly + pan left to show cross better */
.country-badge[style*="jam"] { background-size: 105% 105%; background-position: 35% center; }

/* Jordan - zoom in + pan right to show triangle and star */
.country-badge[style*="jor"] { background-size: 125% 125%; background-position: 40% center; }

/* Chile - very narrow/vertical country shape, fit flag vertically */
.country-badge[style*="chl"] { background-size: auto 100%; background-position: left center; }

/* ===== Badge fade-in: inner layers hidden until images loaded ===== */
/* Hide flag + glass until both mask-image and background-image are cached.
   Reveal via .badge-loaded on the wrapper (per-badge, set by observer)
   or .badges-ready on an ancestor container (legacy batch reveal). */
.country-badge,
.country-badge-glass {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.badge-loaded > .country-badge,
.badge-loaded > .country-badge-glass,
.badges-ready .country-badge,
.badges-ready .country-badge-glass {
  opacity: 1;
}