/* Red Bull Bull Font Face Declarations */
@font-face {
    font-family: 'Bull';
    src: url('/fonts/font/Bull-Heavy1.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Bull';
    src: url('/fonts/font/Bull-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Bull';
    src: url('/fonts/font/Bull-Thin1.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: 'Bull', sans-serif;
    background: transparent;
}

.overlay {
    position: absolute;
    bottom: 30px;
    right: 30px;
    overflow: visible;
}

.widget-table {
    border-collapse: separate;
    border-spacing: 0;
    color: #e0e0e0;
}

.widget-table th, .widget-table td {
    padding: 5px 11px;  /* Scaled from 4px 8px by 1.3225 */
    background: radial-gradient(ellipse at center, rgba(0, 35, 65, 0.85) 0%, rgba(0, 30, 60, 0.90) 100%);
    text-align: center;
    outline: none;  /* Prevent rendering artifacts */
}

.widget-table th {
    color: #FFFFFF;
    font-family: 'Bull', sans-serif;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
    font-size: 13px;  /* Scaled from 10px by 1.3225 */
    border: none;
}

/* Slant cell - the triangular ending of the header row */
.widget-table th.slant-cell {
    width: 7px;  /* Scaled from 5px by 1.3225 */
    padding: 0 !important;
    background: #DD164A !important;  /* Red color from gradient */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    position: relative;
    left: 3px;  /* Scaled from 2px by 1.3225 */
}

/* First header row (top) - shorter height */
.widget-table tr.header-row-top {
    height: 19px !important;  /* Scaled from 14px by 1.3225 */
    position: relative;
    left: -7px;  /* Scaled from -5px by 1.3225 */
}

.widget-table tr.header-row-top th {
    padding: 0 11px !important;  /* Scaled from 0 8px by 1.3225 */
    font-size: 11px;  /* Scaled from 8px by 1.3225 */
    line-height: 1;
}

/* LAST TRICK cell spanning 2 columns - blue gradient with slant */
.widget-table tr.header-row-top th[colspan="2"] {
    background: linear-gradient(90deg, #032143 0%, #0B426A 100%) !important;
    background-size: 100% 100% !important;
    clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);  /* Scaled from 3px by 1.3225 */
}

/* Empty spacer cell in data rows for column alignment */
.widget-table td.slant-spacer {
    width: 7px;  /* Scaled from 5px by 1.3225 */
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Red Bull red background for HIGHEST column data cells */
.widget-table td.highest-cell {
    background: linear-gradient(90deg, #901639 0%, #DD164A 100%);
    background-clip: padding-box;
}

/* Counter-skew removed - no longer needed */
.widget-table th > * {
    display: inline-block;
}

/* Continuous gradient across LAST TRICK, HEIGHT, DISTANCE, HIGHEST headers */
.widget-table th[data-gradient-pos] {
    background: linear-gradient(90deg, #901639 0%, #DD164A 100%);
    background-size: 400% 100%;  /* Span across 4 cells */
}

/* Position gradient for each cell to create continuous flow */
.widget-table th[data-gradient-pos="0"] {
    background-position: 0 0;    /* LAST TRICK - burgundy left */
}

.widget-table th[data-gradient-pos="1"] {
    background-position: 33.3% 0;   /* HEIGHT - transition */
    position: relative;
    left: 7px;  /* Scaled from 5px by 1.3225 */
}

.widget-table th[data-gradient-pos="2"] {
    background-position: 66.6% 0;   /* DISTANCE - transition */
    clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);  /* Scaled from 5px by 1.3225 */
    position: relative;
    left: 7px;  /* Scaled from 5px by 1.3225 */
}

.widget-table th[data-gradient-pos="3"] {
    background-position: 100% 0;  /* HIGHEST - red right */
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%);  /* Scaled from 5px by 1.3225 */
    position: relative;
    left: 3px;  /* Scaled from 2px by 1.3225 */
}

.transparent-header {
    background: transparent !important;
}

.widget-table td {
    font-family: 'Bull', sans-serif;
    font-weight: 500;
    font-size: 16px;  /* Scaled from 12px by 1.3225 */
    background: radial-gradient(ellipse at center bottom, #0B426A 0%, #032143 100%);
    text-align: center; /* Center align all cells by default */
    border-top: 3px solid transparent;  /* Scaled from 2px by 1.3225 */
    background-clip: padding-box;
}

/* Add transparent space between header rows and first data row */
.widget-table tr:nth-child(3) td {
    border-top: 11px solid transparent;  /* Scaled from 8px by 1.3225 */
}

.lycra-color-cell {
    width: 26px;  /* Scaled from 20px by 1.3225 */
    padding: 0 !important;
    background-image: none !important;  /* Remove RB gradient completely */
    background-color: transparent;      /* Allow inline style to override */
    box-shadow: none !important;        /* Remove drop shadow */
}

.rider-name {
    text-align: left !important; /* Ensure left alignment */
    text-transform: uppercase;
    font-family: 'Bull', sans-serif;
    font-weight: 500;
    padding-left: 11px;  /* Scaled from 8px by 1.3225 */
    padding-right: 21px;  /* Scaled from 16px by 1.3225 */
}

/* Mixed font weight for rider names: light initial, heavy surname */
.rider-name .first-name {
    font-family: 'Bull', sans-serif;
    font-weight: 500;  /* Bull-Medium for first initial */
}

.rider-name .last-name {
    font-family: 'Bull', sans-serif;
    font-weight: 500;  /* Bull-Medium for surname */
}

.new-jump-stat {
    color: #DB0A40;
    animation: statPulse 1s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.update-pulse {
    animation: pulse 0.5s ease-in-out;
}

/* Additional styles for compactness */
.widget-table tr {
    height: 29px;  /* Scaled from 22px by 1.3225 */
}

.widget-table td, .widget-table th {
    white-space: nowrap;  /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;  /* Add ellipsis for overflowing text */
}

.overlay.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

/* Graceful fade-out when no data */
@keyframes gracefulFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(26px);  /* Scaled from 20px by 1.3225 */
    }
}

.widget-wrapper.graceful-hide {
    animation: gracefulFadeOut 0.3s ease-out forwards;
}

/* Bold text for data cells */
.data-bold {
    font-family: 'Bull', sans-serif;
    font-weight: 900;
}

/* Gentle fade and scale animation for new jump text */
@keyframes gentleFadeScale {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Cell-level stinger animation */
.stinger-cell {
    position: relative;
    overflow: hidden;
}

.stinger-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(219, 10, 64, 0.8) 20%,
        rgba(219, 10, 64, 0.9) 50%,
        rgba(219, 10, 64, 0.8) 80%,
        transparent 100%);
    transform: translateX(-100%);
    animation: stingerCellSweep 0.7s ease-out;
    pointer-events: none;
    z-index: 10;
}

@keyframes stingerCellSweep {
    to {
        transform: translateX(200%);
    }
}

/* Slide-in animation for rows (right to left) */
@keyframes rowSlideInInitial {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Only animate on explicit class, not all tr elements */
.widget-table tr.initial-slide-in {
    animation: rowSlideInInitial 0.3s ease-out forwards;
    opacity: 0;
}

/* Row fade-out animation (for rider changes) */
@keyframes rowFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(66px);  /* Scaled from 50px by 1.3225 */
    }
}

.widget-table tr.row-fade-out {
    animation: rowFadeOut 0.15s ease-out forwards !important;
}

/* Row slide-in animation (for rider changes) */
@keyframes rowSlideInChange {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.widget-table tr.row-slide-in-change {
    animation: rowSlideInChange 0.2s ease-out forwards !important;
}

/* Widget wrapper show/hide animations */
@keyframes wrapperFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.widget-wrapper.wrapper-hide {
    animation: wrapperFadeOut 0.3s ease-out forwards !important;
}

/* Row slide-in animation for show */
@keyframes rowSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Override default wipeIn when using slide-in */
.widget-table tr.slide-in-row {
    animation: rowSlideIn 0.5s ease-out forwards !important;
    opacity: 0;
}