/* Spectator fight card styles. Moved out of fightcard.php's inline <style> so browsers
   cache it; linked at the same spot in the page (inside the turbo frame). */
.blink-dot {
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
    animation: blink 1s infinite;
}

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

@keyframes pulseShadow {
    0%   { box-shadow: 0 0 20px var(--wl-glow-shadow-20, rgba(249, 118, 22, 0.2)); }
    50%  { box-shadow: 0 0 30px var(--wl-glow-shadow-40, rgba(249, 118, 22, 0.4)); }
    100% { box-shadow: 0 0 20px var(--wl-glow-shadow-20, rgba(249, 118, 22, 0.2)); }
}

.active-fight {
    /* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
    animation: pulseShadow 2s infinite;
    border: 2px solid rgb(182, 58, 36) !important;
}

.progress-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    color: inherit;
    width: 100%;
}

.stick-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.stick-chart-divider {
    height: 1px;
    // background: #333333;
    margin: 8px 0;
    opacity: 0.3;
}

.stick-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stick-label {
    min-width: 60px;
    text-align: right;
    font-size: 0.9rem;
    color: #6c757d;
}

.stick-bar {
    flex-grow: 1;
    height: 12px;
    background: #333333;
    border-radius: 2px;
    overflow: hidden;
}

.stick-fill {
    height: 100%;
    background: #28a745;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stick-value {
    min-width: 40px;
    text-align: left;
    font-size: 0.9rem;
    color: #6c757d;
}

.fighter-stats-value-left,
.fighter-stats-value-right {
    white-space: nowrap;
}

.crowd-predictions-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: opacity 0.3s ease;
}

.crowd-predictions-toggle:hover i {
    opacity: 0.7;
}

.crowd-predictions-toggle.hidden {
    display: none;
}

/* Large screens - set button width to 145px for fight action buttons only */
@media screen and (min-width: 416px) {
    .ps-3.pe-3 .large-button:not([onclick*="voteAward"]) {
        width: 145px !important;
    }
}

/* Medium-small screens */
@media screen and (max-width: 415px) {
    .fighter-image {
        width: 135px !important;
        height: 162px !important;
    }

    img[src="icons/vs.png"] {
        width: 35px !important;
        top: -90px !important;
    }

   .font-30 {
        font-size: 26px !important;
    }
    
    /* Make buttons substantially smaller at 415px breakpoint - exclude award vote buttons
       and the full-width jump-to-current button (it has its own responsive rule above). */
    .large-button:not([onclick*="voteAward"]):not(.jump-to-current-btn) {
        font-size: 14px !important;
        padding: 6px 8px !important;
        height: 45px !important;
        width: 120px !important;
        line-height: 1.2 !important;
    }
    
    /* Target the specific button containers - exclude award vote buttons */
    .ps-3.pe-3 .large-button:not([onclick*="voteAward"]) {
        width: 110px !important;
        font-size: 14px !important;
        padding: 6px 8px !important;
        height: 45px !important;
    }
    
    /* Award vote buttons - keep dynamic width but smaller font */
    .large-button[onclick*="voteAward"] {
        font-size: 14px !important;
        padding: 8px 12px !important;
        height: 45px !important;
        width: auto !important;
        line-height: 1.2 !important;
    }
    
    /* Make fighter stats text smaller at 415px breakpoint */
    .fighter-stats .stat-label,
    .fighter-stats .stat-value {
        font-size: 0.8rem !important;
    }
    
    .fighter-nickname.stat-value {
        font-size: 0.8rem !important;
    }
}

/* Media queries for small screens */
@media screen and (max-width: 395px) {
    .fighter-image {
        width: 120px !important;
        height: 144px !important;
    }
    
    .font-30 {
        font-size: 20px !important;
    }
    
    .progress-circle {
        width: 100px;
        height: 100px;
    }
    
    .stick-label {
        min-width: 50px;
        font-size: 0.8rem;
    }
    
    .stick-value {
        min-width: 35px;
        font-size: 0.8rem;
    }

    /* Award vote text adjustments */
    .font-20 {
        font-size: 16px !important;
    }

    /* VS image adjustments */
    img[src="icons/vs.png"] {
        width: 30px !important;
        top: -100px !important;
    }
}

/* Media queries for small screens */
@media screen and (max-width: 379px) {
    .fighter-image {
        width: 110px !important;
        height: 132px !important;
    }
    
    .font-30 {
        font-size: 20px !important;
    }
    
    .progress-circle {
        width: 100px;
        height: 100px;
    }
    
    .stick-label {
        min-width: 50px;
        font-size: 0.8rem;
    }
    
    .stick-value {
        min-width: 35px;
        font-size: 0.8rem;
    }

    /* Award vote text adjustments */
    .font-20 {
        font-size: 16px !important;
    }

    /* VS image adjustments */
    img[src="icons/vs.png"] {
        width: 25px !important;
        top: -100px !important;
    }

        /* Hide rounds badge */
    .badge:last-child {
        // display: none !important;
    }
}

/* Fighter image gradient filter */
.fighter-image img {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0.5) 85%, rgba(0,0,0,0) 100%);
}

.fighter-name-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

.fighter-firstname {
    display: block;
}

.fighter-lastname {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
}

.jump-to-current-container {
    margin: 0 auto 1.5rem;
    max-width: 640px;
    padding: 0 1rem;
}

.jump-to-current-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

/* Narrow phones: the large-button 2.5rem side padding + nowrap clipped the
   jump-to-current text. Trim padding/size and allow wrapping. */
@media screen and (max-width: 480px) {
    .jump-to-current-btn {
        font-size: 1rem !important;
        letter-spacing: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        white-space: normal !important;
        height: auto !important;
        min-height: 3.25rem;
    }
}

/* Extra small screens */
@media screen and (max-width: 321px) {
    .fighter-image {
        width: 100px !important;
        height: 120px !important;
    }
    
    .font-30 {
        font-size: 18px !important;
    }
    
    .font-20 {
        font-size: 14px !important;
    }
    
    .progress-circle {
        width: 80px;
        height: 80px;
    }
    
    .stick-label {
        min-width: 45px;
        font-size: 0.75rem;
    }
    
    .stick-value {
        min-width: 30px;
        font-size: 0.75rem;
    }

    img[src="icons/vs.png"] {
        width: 25px !important;
        top: -80px !important;
    }

    .font-50 {
        font-size: 40px !important;
    }

    /* Hide rounds badge */
    .badge:last-child {
        display: none !important;
    }
}

.your-pick-full {
    display: inline;
}

.your-pick-short {
    display: none;
}

@media (max-width: 390px) {
    .your-pick-full {
        display: none;
    }
    
    .your-pick-short {
        display: inline;
    }
}

/* ── Modern app polish ─────────────────────────────────────────── */
/* Tag chips (sport / class / weight / rounds) as clean rounded pills */
.fight-tags .badge {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.62) !important;
    opacity: 1 !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
}
/* Completed fights: the class/rounds tags are no longer relevant — dim them right down */
.fight-tags.fight-tags-dim .badge { opacity: 0.3 !important; }
/* Fighter images: a touch more rounding for a modern card look */
.fighter-image img { border-radius: 12px !important; }
/* FIGHTER STATS: no box around the stats — just bigger values + subtle row lines */
.fighter-stats-label { color: rgba(255,255,255,0.42) !important; letter-spacing: 0.04em; }
.fighter-stats-value-left, .fighter-stats-value-right { font-size: 1.4em !important; }
/* No trailing divider under whichever stat row is actually last (Reach, or Height when no reach) */
.fighter-stats-tot .fighter-stats-row:last-child { border-bottom: none !important; }

/* "Jump to current fight" CTA: light translucent green pill (attention, not heavy) */
.jump-to-current-btn {
    /* Follows the Elite accent (--wl-color-primary) when set; live-green otherwise */
    background: color-mix(in srgb, var(--wl-color-primary, #2fbf71) 15%, transparent) !important;
    color: var(--wl-color-primary, #3ad17f) !important;
    border: 1px solid color-mix(in srgb, var(--wl-color-primary, #2fbf71) 45%, transparent) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    gap: 10px !important;
    transition: background .2s ease, transform .12s ease !important;
}
.jump-to-current-btn:hover { background: color-mix(in srgb, var(--wl-color-primary, #2fbf71) 24%, transparent) !important; }
.jump-to-current-btn:active { transform: scale(.985); }
.jump-to-current-btn i { color: var(--wl-color-primary, #3ad17f); animation: fcl-jump-bounce 1.6s ease-in-out infinite; }
@keyframes fcl-jump-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .jump-to-current-btn i { animation: none !important; } }

/* 5px less spacing below the PICK WINNER buttons */
.fighter-card [data-action="pick-winner"] { margin-bottom: 11px !important; }

/* Tale-of-the-tape reveal: stat rows fade in (staggered) when the fight scrolls into view.
   Rows are only hidden once JS has "armed" the reveal, so if the script never runs (or the
   observer misfires on a mobile webview) the stats stay fully visible.
   A gentle opacity fade plays for EVERYONE (it is reduce-motion friendly); the upward
   slide is added only when the user has not requested reduced motion. */
/* Use a keyframe animation (fires reliably on class-add) rather than a transition
   (which needs a paint between states and was unreliable on the mobile webview). */
.fighter-stats-tot.fcl-reveal-armed .fighter-stats-row { opacity: 0; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row { animation: fcl-row-in .5s cubic-bezier(.22, 1, .36, 1) both; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(1) { animation-delay: .03s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(2) { animation-delay: .09s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(3) { animation-delay: .15s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(4) { animation-delay: .21s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(5) { animation-delay: .27s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(6) { animation-delay: .33s; }
.fighter-stats-tot.fcl-stats-in .fighter-stats-row:nth-child(7) { animation-delay: .39s; }
@keyframes fcl-row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Reduced motion: keep a gentle fade, drop the slide */
@media (prefers-reduced-motion: reduce) {
    .fighter-stats-tot.fcl-stats-in .fighter-stats-row { animation-name: fcl-row-in-plain; }
}
@keyframes fcl-row-in-plain { from { opacity: 0; } to { opacity: 1; } }


/* Fighter meta — nickname / flag / club / location: cleaner + more breathing room */
.fighter-card .fighter-nickname { color: rgba(255,255,255,0.55) !important; font-size: 0.95rem; margin-bottom: 8px !important; }
.fighter-card .fighter-meta-flag { width: 26px !important; height: auto; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.45); margin-top: 2px !important; }
.fighter-card .stat-label { color: rgba(255,255,255,0.5); font-size: 0.86rem; line-height: 1.55; }