/**
 * League Widget Styles
 *
 * External stylesheet for League/Tournament widget.
 * Replaces inline <style> blocks to eliminate render-blocking CSS.
 *
 * @package VirtualeaguesSeasonCard
 * @version 2.0
 */

/* ============================================
   Base Styles
   ============================================ */

.league-widget {
    position: relative;
    z-index: 5;
    max-width: 95%;
    min-height: 20rem;
    width: 95%;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 1px 12px 25px rgba(0, 0, 0, 0.78);
    border-radius: 2.25rem;
    margin: 1rem auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    overflow: hidden;
}

.league-widget::before {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.25rem;
    z-index: -1;
    border: 0.155rem solid transparent;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

/* ============================================
   Header Styles
   ============================================ */

.league-widget-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.5rem 1.5rem;
}

.league-widget-date {
    color: #ddd;
    font-size: 0.9rem;
    font-weight: bold;
}

.league-widget-status {
    font-weight: bold;
    font-size: 1rem;
    font-style: italic;
}

.league-widget-status.status-live {
    color: #e60023;
}

.league-widget-status.status-closed {
    color: #ddd;
}

.league-widget-status.status-coming-soon {
    color: #3ef254;
}

.blinking-dot {
    animation: blink 1s infinite;
    font-size: 1rem;
}

.blinking-dot.red {
    color: #e60023;
}

.blinking-dot.green {
    color: #3ef254;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.league-widget-console {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.league-widget-console img {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.3rem;
}

/* ============================================
   Body Styles
   ============================================ */

.league-widget-body {
    flex: 1;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.league-widget-logo {
    margin-bottom: 1rem;
}

.league-widget-logo img {
    max-height: 4rem;
    width: auto;
}

.league-widget-title {
    color: #fff;
    font-size: 1.375rem;
    margin: 0.625rem 0 0.188rem 0;
    text-transform: capitalize;
    font-weight: 600;
}

.league-widget-subtitle {
    color: #ddd;
    font-size: 1rem;
    letter-spacing: 0.031rem;
    margin: 0.2rem 0 1.5rem 0;
    font-style: italic;
}

/* ============================================
   Button Styles
   ============================================ */

.league-widget-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.league-widget-primary {
    margin-bottom: 1rem;
    width: 100%;
}

.league-widget-primary .button {
    display: inline-block;
    padding: 0.75rem 2rem;
    border-radius: 2rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.league-widget-primary .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.league-widget-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.league-widget-secondary .button {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.league-widget-secondary .button:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Color Schemes
   ============================================ */

/* Dark Nebula (Purple) */
.league-widget-dark-nebula {
    background: radial-gradient(ellipse at right top, #271b52ed 0%, #151419 47%, #151419 100%);
}

.league-widget-dark-nebula::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8044d3) border-box;
}

.league-widget-dark-nebula .league-widget-subtitle {
    color: #a27dff;
}

.league-widget-dark-nebula .league-widget-primary .button {
    background: #8044d3;
}

.league-widget-dark-nebula .league-widget-primary .button:hover {
    background: #9058e3;
}

/* Midnight Tech (Blue) */
.league-widget-midnight-tech {
    background: radial-gradient(ellipse at right top, #00008bed 0%, #151419 47%, #151419 100%);
}

.league-widget-midnight-tech::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #4169e1) border-box;
}

.league-widget-midnight-tech .league-widget-subtitle {
    color: #4169e1;
}

.league-widget-midnight-tech .league-widget-primary .button {
    background: #4169e1;
}

.league-widget-midnight-tech .league-widget-primary .button:hover {
    background: #0000cd;
}

/* Crimson Void (Red) */
.league-widget-crimson-void {
    background: radial-gradient(ellipse at right top, #3d0d14ed 0%, #151419 47%, #151419 100%);
}

.league-widget-crimson-void::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff3e4d) border-box;
}

.league-widget-crimson-void .league-widget-subtitle {
    color: #ff7983;
}

.league-widget-crimson-void .league-widget-primary .button {
    background: #ff3e4d;
}

.league-widget-crimson-void .league-widget-primary .button:hover {
    background: #ff5d6a;
}

/* Toxic Glow (Green) */
.league-widget-toxic-glow {
    background: radial-gradient(ellipse at right top, #192e1aed 0%, #151419 47%, #151419 100%);
}

.league-widget-toxic-glow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #3ef254) border-box;
}

.league-widget-toxic-glow .league-widget-subtitle {
    color: #7df589;
}

.league-widget-toxic-glow .league-widget-primary .button {
    background: #3ef254;
}

.league-widget-toxic-glow .league-widget-primary .button:hover {
    background: #5cf46e;
}

/* Cyber Orange */
.league-widget-cyber-orange {
    background: radial-gradient(ellipse at right top, #3d2207ed 0%, #151419 47%, #151419 100%);
}

.league-widget-cyber-orange::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff9b00) border-box;
}

.league-widget-cyber-orange .league-widget-subtitle {
    color: #ffb84d;
}

.league-widget-cyber-orange .league-widget-primary .button {
    background: #ff9b00;
}

.league-widget-cyber-orange .league-widget-primary .button:hover {
    background: #ffac33;
}

/* Arctic Mint (Teal) */
.league-widget-arctic-mint {
    background: radial-gradient(ellipse at right top, #0d3b3bed 0%, #151419 47%, #151419 100%);
}

.league-widget-arctic-mint::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #00f0c7) border-box;
}

.league-widget-arctic-mint .league-widget-subtitle {
    color: #4df5d9;
}

.league-widget-arctic-mint .league-widget-primary .button {
    background: #00f0c7;
}

.league-widget-arctic-mint .league-widget-primary .button:hover {
    background: #33f3d2;
}

/* Magenta Pulse */
.league-widget-magenta-pulse {
    background: radial-gradient(ellipse at right top, #380a2ced 0%, #151419 47%, #151419 100%);
}

.league-widget-magenta-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #ff39c2) border-box;
}

.league-widget-magenta-pulse .league-widget-subtitle {
    color: #ff7dd6;
}

.league-widget-magenta-pulse .league-widget-primary .button {
    background: #ff39c2;
}

.league-widget-magenta-pulse .league-widget-primary .button:hover {
    background: #ff5dcf;
}

/* Carbon Gray */
.league-widget-carbon-gray {
    background: radial-gradient(ellipse at right top, #262626ed 0%, #151419 47%, #151419 100%);
}

.league-widget-carbon-gray::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8c8c8c) border-box;
}

.league-widget-carbon-gray .league-widget-subtitle {
    color: #b3b3b3;
}

.league-widget-carbon-gray .league-widget-primary .button {
    background: #8c8c8c;
}

.league-widget-carbon-gray .league-widget-primary .button:hover {
    background: #a3a3a3;
}

/* Volt Yellow */
.league-widget-volt-yellow {
    background: radial-gradient(ellipse at right top, #3d3d0aed 0%, #151419 47%, #151419 100%);
}

.league-widget-volt-yellow::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFFF00) border-box;
}

.league-widget-volt-yellow .league-widget-subtitle {
    color: #FFFF33;
}

.league-widget-volt-yellow .league-widget-primary .button {
    background: #FFFF00;
    color: #151419;
}

.league-widget-volt-yellow .league-widget-primary .button:hover {
    background: #FFF200;
    color: #151419;
}

/* Copper Core */
.league-widget-copper-core {
    background: radial-gradient(ellipse at right top, #3d1e07ed 0%, #151419 47%, #151419 100%);
}

.league-widget-copper-core::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E67E22) border-box;
}

.league-widget-copper-core .league-widget-subtitle {
    color: #F39C54;
}

.league-widget-copper-core .league-widget-primary .button {
    background: #E67E22;
}

.league-widget-copper-core .league-widget-primary .button:hover {
    background: #D4722A;
}

/* Frost White */
.league-widget-frost-white {
    background: radial-gradient(ellipse at right top, #262e3ded 0%, #151419 47%, #151419 100%);
}

.league-widget-frost-white::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #F0FFFF) border-box;
}

.league-widget-frost-white .league-widget-subtitle {
    color: #E0F8FF;
}

.league-widget-frost-white .league-widget-primary .button {
    background: #F0FFFF;
    color: #151419;
}

.league-widget-frost-white .league-widget-primary .button:hover {
    background: #FFFFFF;
    color: #151419;
}

/* Lime Surge */
.league-widget-lime-surge {
    background: radial-gradient(ellipse at right top, #2e3d0aed 0%, #151419 47%, #151419 100%);
}

.league-widget-lime-surge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #CCFF00) border-box;
}

.league-widget-lime-surge .league-widget-subtitle {
    color: #D4FF33;
}

.league-widget-lime-surge .league-widget-primary .button {
    background: #CCFF00;
    color: #151419;
}

.league-widget-lime-surge .league-widget-primary .button:hover {
    background: #E0FF66;
    color: #151419;
}

/* Neon Sand */
.league-widget-neon-sand {
    background: radial-gradient(ellipse at right top, #3d2e1aed 0%, #151419 47%, #151419 100%);
}

.league-widget-neon-sand::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFE4B5) border-box;
}

.league-widget-neon-sand .league-widget-subtitle {
    color: #FFD699;
}

.league-widget-neon-sand .league-widget-primary .button {
    background: #FFE4B5;
    color: #151419;
}

.league-widget-neon-sand .league-widget-primary .button:hover {
    background: #FFF0CC;
    color: #151419;
}

/* Coral Burn */
.league-widget-coral-burn {
    background: radial-gradient(ellipse at right top, #3d1f14ed 0%, #151419 47%, #151419 100%);
}

.league-widget-coral-burn::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF7F50) border-box;
}

.league-widget-coral-burn .league-widget-subtitle {
    color: #FF9966;
}

.league-widget-coral-burn .league-widget-primary .button {
    background: #FF7F50;
}

.league-widget-coral-burn .league-widget-primary .button:hover {
    background: #FFB399;
}

/* Gold Rush */
.league-widget-gold-rush {
    background: radial-gradient(ellipse at right top, #3d3207ed 0%, #151419 47%, #151419 100%);
}

.league-widget-gold-rush::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FFD700) border-box;
}

.league-widget-gold-rush .league-widget-subtitle {
    color: #FFDF33;
}

.league-widget-gold-rush .league-widget-primary .button {
    background: #FFD700;
    color: #151419;
}

.league-widget-gold-rush .league-widget-primary .button:hover {
    background: #FFE766;
    color: #151419;
}

/* Chrome Edge */
.league-widget-chrome-edge {
    background: radial-gradient(ellipse at right top, #2e2e2eed 0%, #151419 47%, #151419 100%);
}

.league-widget-chrome-edge::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #E8E8E8) border-box;
}

.league-widget-chrome-edge .league-widget-subtitle {
    color: #F5F5F5;
}

.league-widget-chrome-edge .league-widget-primary .button {
    background: #E8E8E8;
    color: #151419;
}

.league-widget-chrome-edge .league-widget-primary .button:hover {
    background: #FFFFFF;
    color: #151419;
}

/* Earth Pulse */
.league-widget-earth-pulse {
    background: radial-gradient(ellipse at right top, #2e1a0ded 0%, #151419 47%, #151419 100%);
}

.league-widget-earth-pulse::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #8B4513) border-box;
}

.league-widget-earth-pulse .league-widget-subtitle {
    color: #A0522D;
}

.league-widget-earth-pulse .league-widget-primary .button {
    background: #8B4513;
}

.league-widget-earth-pulse .league-widget-primary .button:hover {
    background: #CD853F;
}

/* Rose Shock */
.league-widget-rose-shock {
    background: radial-gradient(ellipse at right top, #3d1a2eed 0%, #151419 47%, #151419 100%);
}

.league-widget-rose-shock::before {
    background: linear-gradient(45deg, #232228, #232228, #232228, #232228, #FF66CC) border-box;
}

.league-widget-rose-shock .league-widget-subtitle {
    color: #FF99DD;
}

.league-widget-rose-shock .league-widget-primary .button {
    background: #FF66CC;
}

.league-widget-rose-shock .league-widget-primary .button:hover {
    background: #FFCCEE;
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Desktop Styles */
@media (min-width: 992px) {
    .league-widget {
        max-width: 45rem;
        min-height: 22rem;
        width: 100%;
    }

    .league-widget-logo img {
        max-height: 5rem;
    }

    .league-widget-title {
        font-size: 1.75rem;
    }

    .league-widget-subtitle {
        font-size: 1.125rem;
    }

    .league-widget-primary .button {
        padding: 0.875rem 2.5rem;
        font-size: 1.125rem;
    }

    .league-widget-secondary {
        gap: 0.75rem;
    }

    .league-widget-secondary .button {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
    }
}

/* Extra Large Desktop */
@media (min-width: 1400px) {
    .league-widget {
        max-width: 55rem;
        min-height: 24rem;
    }
}

/* Medium Screens */
@media (min-width: 769px) and (max-width: 991px) {
    .league-widget {
        max-width: 35rem;
        min-height: 21rem;
        width: 100%;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .league-widget {
        max-width: 95%;
        width: 95%;
        margin: 1rem auto;
        z-index: 5;
    }

    .league-widget-header,
    .league-widget-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .league-widget-title {
        font-size: 1.25rem;
    }

    .league-widget-subtitle {
        font-size: 0.9rem;
    }

    .league-widget-secondary {
        gap: 0.4rem;
    }

    .league-widget-secondary .button {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    /* Fix overlap with mobile menus */
    body.menu-is-open .league-widget {
        transform: translateX(200px);
        transition: transform 0.3s ease;
    }
}

/* Handle menu interactions */
body.mobile-menu-active .league-widget,
.open-panel .league-widget,
.panel-open .league-widget,
.menu-open .league-widget,
.side-menu-open .league-widget {
    z-index: 1;
}