/* ==========================================================
   MATCHCARD
   Pixel-frozen 390px design.
   Scaled on viewports < 390px via --matchcard-scale.
   ========================================================== */

/* ==========================================================
   LIST CONTAINER — mount target for cloned cards
   ========================================================== */

#matchcard {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
}

.matchcard-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================================
   VIRTUALIZER SPACERS
   Top/bottom spacer elements inserted by the virtualizer.
   They reserve scroll height without rendering cards.
   Must not participate in visual styling.
   ========================================================== */

.virtualizer-spacer {
    display: block;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    pointer-events: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    /* Height is set inline by JS. Keep the default at 0 so an
       uninitialized spacer contributes nothing to layout. */
    height: 0;
}

.virtualizer-spacer-top {
    /* Reserved for future decorative styling if needed */
}

.virtualizer-spacer-bottom {
    /* Reserved for future decorative styling if needed */
}

/* ==========================================================
   CARD
   Pixel contract: 390 x 128 collapsed, 390 x 360 open.
   Do NOT change these values — they are the design.

   Accordion motion:
   - height transitions between 128px and --card-open-height
   - cubic-bezier(0.16, 1, 0.3, 1) — snappy start, soft landing
     (Apple / Material "emphasized decelerate" curve)
   ========================================================== */

.matchcard {
    position: relative;
    left: 0;
    top: 0;
    width: 390px;
    height: 128px;
    background: linear-gradient(180deg, #7f00ff 0%, #ff3399 100%);
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    --card-open-height: 360px;

    /* Scale wrapper — fixed 390px design scaled to viewport */
    transform-origin: top left;
    transform: scale(var(--matchcard-scale, 1));

    /* Accordion motion */
    transition: height 300ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: height;
}

.matchcard.is-open {
    height: var(--card-open-height);
}

.matchcard .matchcard-view {
    position: relative;
    width: 390px;
    height: 360px;
    overflow: hidden;
}

/* ==========================================================
   COLLAPSED SECTION
   Occupies the top 128px of the card. Both sections overlap
   at the top-left of the card — the original pixel contract.
   ========================================================== */

.matchcard .matchcard-collapsed {
    position: absolute;
    left: 0;
    top: 0;
    width: 390px;
    height: 128px;
    overflow: hidden;
}

/* ==========================================================
   EXPANDED SECTION
   Occupies the full 390 x 360 design surface. Its children
   are positioned absolutely at their designed top values.
   Only visible when the card has .is-open.
   ========================================================== */

.matchcard .matchcard-expanded {
    position: absolute;
    left: 0;
    top: 0;
    width: 390px;
    height: 360px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.matchcard.is-open .matchcard-expanded {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================================
   STATUS MESSAGE (loading / error / empty)
   ========================================================== */

.matchcard-status {
    width: 390px;
    padding: 24px 16px;
    text-align: center;
    color: #7f00ff;
    background: #f70491;
    font-size: 12px;
    line-height: 1.4;
    box-sizing: border-box;
}

.matchcard-status--clickable {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.matchcard-status--clickable:focus-visible {
    outline: 2px solid #f70491;
    outline-offset: 2px;
}

/* ==========================================================
   BADGES
   ========================================================== */

.matchcard .league-badge-slot,
.matchcard .home-badge-slot,
.matchcard .away-badge-slot {
    position: absolute;
    width: 24px;
    height: 24px;
}

.matchcard .league-badge-slot {
    left: 3px;
    top: 2px;
}

.matchcard .home-badge-slot {
    left: 3px;
    top: 30px;
}

.matchcard .away-badge-slot {
    left: 3px;
    top: 60px;
}

.matchcard .league-badge-img,
.matchcard .home-badge-img,
.matchcard .away-badge-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* ==========================================================
   TEXT SLOTS
   ========================================================== */

.matchcard .league-header-slot,
.matchcard .league-country-slot,
.matchcard .home-team-slot,
.matchcard .away-team-slot {
    position: absolute;
    width: 72px;
    height: 16px;
    color: #ffffff;
    line-height: 160%;
    display: flex;
    align-items: center;
    padding: 0 4px;
    text-overflow: ellipsis;
}

.matchcard .league-header-slot {
    left: 30px;
    top: 2px;
    font-size: 9px;
}

.matchcard .league-country-slot {
    left: 105px;
    top: 2px;
    font-size: 9px;
}

.matchcard .home-team-slot {
    left: 30px;
    top: 34px;
    font-size: 9px;
    padding: 0 1px;
}

.matchcard .away-team-slot {
    left: 30px;
    top: 64px;
    font-size: 9px;
    padding: 0 1px;
}

/* ==========================================================
   SCORE SLOTS
   ========================================================== */

.matchcard .home-score-slot,
.matchcard .away-score-slot {
    position: absolute;
    width: 18px;
    height: 18px;
    color: #ffffff;
    font-size: 12px;
    line-height: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .home-score-slot {
    left: 110px;
    top: 33px;
}

.matchcard .away-score-slot {
    left: 110px;
    top: 63px;
}

/* ==========================================================
   STATUS SLOTS
   ========================================================== */

.matchcard .match-status-slot,
.matchcard .ft-status-slot {
    position: absolute;
    width: 48px;
    height: 20px;
    color: #ffffff;
    font-size: 9px;
    line-height: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .match-status-slot {
    left: 150px;
    top: 33px;
}

.matchcard .ft-status-slot {
    left: 150px;
    top: 63px;
}

/* ==========================================================
   MARKET SELECTIONS (1X2 collapsed)
   ========================================================== */

.matchcard .market-selection-1,
.matchcard .market-selection-x,
.matchcard .market-selection-2 {
    position: absolute;
    width: 40px;
    height: 16px;
    top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.matchcard .market-selection-1 {
    left: 220px;
}

.matchcard .market-selection-x {
    left: 270px;
}

.matchcard .market-selection-2 {
    left: 320px;
}

.matchcard .selection-tile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.matchcard .one-column-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .static-label-placeholder {
    font-size: 7px;
    font-weight: 700;
    color: #f70491;
    line-height: 100%;
}

.matchcard .line-row {
    width: 100%;
    height: 1px;
    opacity: 0.3;
}

.matchcard .market-selection-1 .line-row {
    background: #00ff15;
}

.matchcard .market-selection-x .line-row {
    background: #00ff15;
}

.matchcard .market-selection-2 .line-row {
    background: #00ff15;
}

.matchcard .odds-value-slot {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    line-height: 100%;
}

/* ==========================================================
   PREDICTION SLOTS (pre-mode 1 / 2)
   ========================================================== */

.matchcard .prediction-slot-1,
.matchcard .prediction-slot-2 {
    position: absolute;
    width: 72px;
    height: 16px;
    top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .prediction-slot-1 {
    left: 214px;
}

.matchcard .prediction-slot-2 {
    left: 290px;
}

.matchcard .prediction-slot-1 .static-label-placeholder,
.matchcard .prediction-slot-2 .static-label-placeholder {
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    line-height: 100%;
    text-align: center;
    visibility: visible;
}

/* ==========================================================
   PREDICTION DETAILS
   ========================================================== */

.matchcard .prediction-market-type-state,
.matchcard .prediction-market-type-state-2,
.matchcard .prediction-confidence-state,
.matchcard .prediction-confidence-state-1,
.matchcard .prediction-detailed-line-state,
.matchcard .prediction-detailed-line-state-1,
.matchcard .prediction-odds-value-slot-1,
.matchcard .prediction-odds-value-slot-2 {
    position: absolute;
    width: 72px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.matchcard .prediction-market-type-state {
    left: 214px;
    top: 45px;
}

.matchcard .prediction-confidence-state {
    left: 214px;
    top: 65px;
}

.matchcard .prediction-detailed-line-state {
    left: 214px;
    top: 85px;
}

.matchcard .prediction-odds-value-slot-1 {
    left: 214px;
    top: 105px;
}

.matchcard .prediction-market-type-state-2 {
    left: 290px;
    top: 45px;
}

.matchcard .prediction-confidence-state-1 {
    left: 290px;
    top: 65px;
}

.matchcard .prediction-detailed-line-state-1 {
    left: 290px;
    top: 85px;
}

.matchcard .prediction-odds-value-slot-2 {
    left: 290px;
    top: 105px;
}

.matchcard .market-type-label,
.matchcard .confidence-label,
.matchcard .detailed-line-label,
.matchcard .odds-value-label {
    font-size: 8px;
    font-weight: 600;
    color: #ffffff;
    line-height: 100%;
    text-overflow: ellipsis;
}

/* ==========================================================
   EXPANDED — HOME/AWAY FORM
   ========================================================== */

.matchcard .home-form-label {
    position: absolute;
    left: 30px;
    top: 130px;
    width: 58px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .home-form-label-text {
    font-size: 9px;
    line-height: 120%;
    color: #f70491;
    text-overflow: ellipsis;
}

.matchcard .home-form-tile-1,
.matchcard .home-form-tile-2,
.matchcard .home-form-tile-3,
.matchcard .home-form-tile-4,
.matchcard .home-form-tile-5 {
    position: absolute;
    width: 28px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 130px;
}

.matchcard .home-form-tile-1 {
    left: 93px;
}

.matchcard .home-form-tile-2 {
    left: 123px;
}

.matchcard .home-form-tile-3 {
    left: 153px;
}

.matchcard .home-form-tile-4 {
    left: 183px;
}

.matchcard .home-form-tile-5 {
    left: 213px;
}

.matchcard .home-form-tile-text {
    font-size: 20px;
    line-height: 120%;
    color: #ffffff;
}

.matchcard .away-form-label {
    position: absolute;
    left: 30px;
    top: 160px;
    width: 58px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .away-form-label-text {
    font-size: 9px;
    line-height: 120%;
    color: #f70491;
    text-overflow: ellipsis;
}

.matchcard .away-form-tile-1,
.matchcard .away-form-tile-2,
.matchcard .away-form-tile-3,
.matchcard .away-form-tile-4,
.matchcard .away-form-tile-5 {
    position: absolute;
    width: 28px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 160px;
}

.matchcard .away-form-tile-1 {
    left: 93px;
}

.matchcard .away-form-tile-2 {
    left: 123px;
}

.matchcard .away-form-tile-3 {
    left: 153px;
}

.matchcard .away-form-tile-4 {
    left: 183px;
}

.matchcard .away-form-tile-5 {
    left: 213px;
}

.matchcard .away-form-tile-text {
    font-size: 20px;
    line-height: 120%;
    color: #ffffff;
}

/* ==========================================================
   FORM STATE — WIN / DRAW / LOSS
   Applied by matchcard.controller.js from the ViewModel
   character (homeTeam.form[i] / awayTeam.form[i]).
   Only W / D / L map to a class. All other values — including
   the backend "-" sentinel and the empty/null tile — do not
   receive a class, so the base color #ffffff above applies.
   Specificity (0,3,0) intentionally outranks the base (0,2,0)
   without !important.
   ========================================================== */

.matchcard .home-form-tile-text.form-win,
.matchcard .away-form-tile-text.form-win {
    color: #00ff15;
}

.matchcard .home-form-tile-text.form-draw,
.matchcard .away-form-tile-text.form-draw {
    color: #ffcc00;
}

.matchcard .home-form-tile-text.form-loss,
.matchcard .away-form-tile-text.form-loss {
    color: #ff2222;
}

/* ==========================================================
   SELECTION TILES 1..7
   ========================================================== */

.matchcard .selection-tile-1,
.matchcard .selection-tile-2,
.matchcard .selection-tile-3,
.matchcard .selection-tile-4,
.matchcard .selection-tile-5,
.matchcard .selection-tile-6,
.matchcard .selection-tile-7 {
    position: absolute;
    width: 50px;
    height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 190px;
}

.matchcard .selection-tile-1 {
    left: 2px;
}

.matchcard .selection-tile-2 {
    left: 54px;
}

.matchcard .selection-tile-3 {
    left: 106px;
}

.matchcard .selection-tile-4 {
    left: 158px;
}

.matchcard .selection-tile-5 {
    left: 210px;
}

.matchcard .selection-tile-6 {
    left: 262px;
}

.matchcard .selection-tile-7 {
    left: 314px;
}

.matchcard .selection-tile-1 .one-column-row-label,
.matchcard .selection-tile-2 .one-column-row-label,
.matchcard .selection-tile-3 .one-column-row-label,
.matchcard .selection-tile-4 .one-column-row-label,
.matchcard .selection-tile-5 .one-column-row-label,
.matchcard .selection-tile-6 .one-column-row-label,
.matchcard .selection-tile-7 .one-column-row-label {
    font-size: 12px;
    line-height: 120%;
    color: #ffffff;
    text-overflow: ellipsis;
}

.matchcard .selection-tile-1 .line-row,
.matchcard .selection-tile-2 .line-row,
.matchcard .selection-tile-3 .line-row,
.matchcard .selection-tile-4 .line-row,
.matchcard .selection-tile-5 .line-row,
.matchcard .selection-tile-6 .line-row,
.matchcard .selection-tile-7 .line-row {
    width: 100%;
    height: 1px;
    background: #ffffff;
    opacity: 0.3;
}

.matchcard .selection-tile-1 .selection-odds,
.matchcard .selection-tile-2 .selection-odds,
.matchcard .selection-tile-3 .selection-odds,
.matchcard .selection-tile-4 .selection-odds,
.matchcard .selection-tile-5 .selection-odds,
.matchcard .selection-tile-6 .selection-odds,
.matchcard .selection-tile-7 .selection-odds {
    font-size: 12px;
    line-height: 120%;
    color: #ffffff;
    white-space: nowrap;
}

/* ==========================================================
   MARKET SECTION HEADERS
   ========================================================== */

.matchcard .market-section-header,
.matchcard .market-section-header-2,
.matchcard .market-section-header-3 {
    position: absolute;
    left: 2px;
    width: 383px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.matchcard .market-section-header {
    top: 232px;
}

.matchcard .market-section-header-2 {
    top: 274px;
}

.matchcard .market-section-header-3 {
    top: 315px;
}

.matchcard .market-section-header-text,
.matchcard .market-section-header-text-2,
.matchcard .market-section-header-text-3 {
    font-size: 12px;
    line-height: 120%;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* ==========================================================
   MARKET SELECTION TILES 1..12
   ========================================================== */

.matchcard .market-selection-tile-1,
.matchcard .market-selection-tile-2,
.matchcard .market-selection-tile-3,
.matchcard .market-selection-tile-4,
.matchcard .market-selection-tile-5,
.matchcard .market-selection-tile-6,
.matchcard .market-selection-tile-7,
.matchcard .market-selection-tile-8,
.matchcard .market-selection-tile-9,
.matchcard .market-selection-tile-10,
.matchcard .market-selection-tile-11,
.matchcard .market-selection-tile-12 {
    position: absolute;
    width: 93px;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.matchcard .market-selection-tile-1 {
    left: 2px;
    top: 250px;
}

.matchcard .market-selection-tile-2 {
    left: 96px;
    top: 250px;
}

.matchcard .market-selection-tile-3 {
    left: 190px;
    top: 250px;
}

.matchcard .market-selection-tile-4 {
    left: 284px;
    top: 250px;
}

.matchcard .market-selection-tile-5 {
    left: 2px;
    top: 292px;
}

.matchcard .market-selection-tile-6 {
    left: 96px;
    top: 292px;
}

.matchcard .market-selection-tile-7 {
    left: 190px;
    top: 292px;
}

.matchcard .market-selection-tile-8 {
    left: 284px;
    top: 292px;
}

.matchcard .market-selection-tile-9 {
    left: 2px;
    top: 333px;
}

.matchcard .market-selection-tile-10 {
    left: 96px;
    top: 333px;
}

.matchcard .market-selection-tile-11 {
    left: 190px;
    top: 333px;
}

.matchcard .market-selection-tile-12 {
    left: 284px;
    top: 333px;
}

.matchcard .market-selection-tile-1 .one-column-row-label,
.matchcard .market-selection-tile-2 .one-column-row-label,
.matchcard .market-selection-tile-3 .one-column-row-label,
.matchcard .market-selection-tile-4 .one-column-row-label,
.matchcard .market-selection-tile-5 .one-column-row-label,
.matchcard .market-selection-tile-6 .one-column-row-label,
.matchcard .market-selection-tile-7 .one-column-row-label,
.matchcard .market-selection-tile-8 .one-column-row-label,
.matchcard .market-selection-tile-9 .one-column-row-label,
.matchcard .market-selection-tile-10 .one-column-row-label,
.matchcard .market-selection-tile-11 .one-column-row-label,
.matchcard .market-selection-tile-12 .one-column-row-label {
    font-size: 8px;
    line-height: 120%;
    color: #ffffff;
    text-overflow: ellipsis;
}

.matchcard .market-selection-tile-1 .line-row,
.matchcard .market-selection-tile-2 .line-row,
.matchcard .market-selection-tile-3 .line-row,
.matchcard .market-selection-tile-4 .line-row,
.matchcard .market-selection-tile-5 .line-row,
.matchcard .market-selection-tile-6 .line-row,
.matchcard .market-selection-tile-7 .line-row,
.matchcard .market-selection-tile-8 .line-row,
.matchcard .market-selection-tile-9 .line-row,
.matchcard .market-selection-tile-10 .line-row,
.matchcard .market-selection-tile-11 .line-row,
.matchcard .market-selection-tile-12 .line-row {
    width: 100%;
    height: 1px;
    background: #ffffff;
    opacity: 0.3;
}

.matchcard .market-selection-tile-1 .market-selection-odds,
.matchcard .market-selection-tile-2 .market-selection-odds,
.matchcard .market-selection-tile-3 .market-selection-odds,
.matchcard .market-selection-tile-4 .market-selection-odds,
.matchcard .market-selection-tile-5 .market-selection-odds,
.matchcard .market-selection-tile-6 .market-selection-odds,
.matchcard .market-selection-tile-7 .market-selection-odds,
.matchcard .market-selection-tile-8 .market-selection-odds,
.matchcard .market-selection-tile-9 .market-selection-odds,
.matchcard .market-selection-tile-10 .market-selection-odds,
.matchcard .market-selection-tile-11 .market-selection-odds,
.matchcard .market-selection-tile-12 .market-selection-odds {
    font-size: 8px;
    line-height: 120%;
    color: #ffffff;
    white-space: nowrap;
}

/* ==========================================================
   RESPONSIVE — scale wrapper behavior
   The scale factor is written by JS (viewport/rootlayout).
   On viewports >= 390px, --matchcard-scale is 1.
   On viewports <  390px, --matchcard-scale < 1.
   ========================================================== */

@media (max-width: 390px) {
    #matchcard {
        overflow-x: hidden;
    }
}

/* ==========================================================
   EDGE FADE UNDER HEADER STACK
   Content scrolling out of the top of the scroll region
   fades smoothly into the header's bottom edge.

   Uses mask-image (GPU-accelerated, no JS).
   -webkit-mask-image for iOS Safari.
   ========================================================== */

#matchMount {
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            black var(--fade-band, 24px));
    mask-image: linear-gradient(to bottom,
            transparent 0,
            black var(--fade-band, 24px));
}