/* ==========================================================================
   HOME PAGE — LIVE ROUND TICKETS  (v4)
   All overrides scoped to #indexContainer to avoid affecting other pages
   ========================================================================== */

/* Reduce container top margin and padding so title aligns with info icon */
#indexContainer {
    margin-top: 14px !important;
    padding-top: 0 !important;
}

/* Align title and info icon on the same row always */
#indexContainer header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0;
}

#indexContainer header h1 {
    margin: 0;
    flex: 1;
    text-align: center;
}

#indexContainer header .top-right-info-icon-wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#home-tickets-section {
    margin: 0 0 10px;
}

/* Tighten gap between SELECT LEAGUE divider and carousel */
#indexContainer #league-selection {
    margin-top: 4px;
}

/* Section header — collapses when no live indicator */
.ht-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin-bottom: 6px;
}

.ht-live-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(220,53,53,0.1);
    border: 1px solid rgba(220,53,53,0.25);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #dc3535;
}

/* ---- GRID ---- */
.ht-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

/* Orphaned last ticket: centre it at 1/3 width */
.ht-grid > .ht-ticket:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 33%;
    max-width: 160px;
}

@media (min-width: 600px) {
    .ht-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .ht-grid > .ht-ticket:last-child:nth-child(3n+1) {
        grid-column: unset;
        justify-self: unset;
        width: 172px;
        max-width: none;
    }
}

.ht-loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

.ht-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(0,0,0,0.4);
    font-size: 0.8rem;
    padding: 12px 0;
}

/* ---- TICKET ---- */
.ht-ticket {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 11px;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 7px 7px 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.ht-ticket:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
}

.ht-ticket--glow {
    border-color: rgba(220,53,53,0.3);
    box-shadow: 0 0 0 1px rgba(220,53,53,0.22), 0 2px 12px rgba(220,53,53,0.1);
}
.ht-ticket--glow:hover {
    box-shadow: 0 0 0 1px rgba(220,53,53,0.4), 0 5px 20px rgba(220,53,53,0.14);
}
.ht-ticket--complete { opacity: 0.8; }

@media (min-width: 600px) { .ht-ticket { width: 172px; } }
@media (min-width: 900px) { .ht-ticket { width: 180px; } }

/* ---- TOP ROW ---- */
.ht-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 3px;
    min-height: 15px;
}

.ht-badge {
    background: var(--lc, #005BAC);
    color: #fff;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1.4;
}

.ht-time {
    font-size: 0.54rem;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    white-space: nowrap;
    text-align: right;
    flex: 1;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1;
}

.ht-live-badge {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #dc3535;
    line-height: 1;
}

/* ---- LOGOS ROW ---- */
.ht-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    margin-bottom: 3px;
}

.ht-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 5px;
    flex-shrink: 0;
}

.ht-vs {
    font-size: 0.46rem;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
    letter-spacing: 0.04em;
    text-align: center;
    flex: 1;
}

/* ---- SCORES ROW — centred under each logo ---- */
.ht-scores {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ht-score {
    font-size: 1rem;
    font-weight: 800;
    color: #111;
    line-height: 1;
    /* Match logo width so score sits centred under its logo */
    width: 34px;
    text-align: center;
    flex-shrink: 0;
}

.ht-score-sep {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(0,0,0,0.3);
    flex: 1;
    text-align: center;
}

/* ---- PROGRESS BAR ---- */
.ht-bar-wrap {
    height: 3px;
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 5px;
}

.ht-bar-spacer {
    height: 3px;
    margin-bottom: 5px;
}

.ht-bar {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, #28a745, #ffc107 50%, #dc3545 100%);
    transition: width 0.5s ease;
    max-width: 100%;
}

/* ---- BOTTOM ROW ---- */
.ht-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
}

.ht-venue {
    font-size: 0.5rem;
    color: rgba(0,0,0,0.45);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ht-status {
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 3px;
    padding: 1px 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.6;
}

.ht-status--live     { background: rgba(220,53,53,0.12); color: #dc3535; }
.ht-status--upcoming { background: rgba(0,91,172,0.1);   color: #005BAC; }
.ht-status--complete { background: rgba(0,0,0,0.06);      color: rgba(0,0,0,0.45); }

/* ---- PULSE DOT ---- */
.ht-pulse-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #dc3535;
    flex-shrink: 0;
    animation: htPulse 1.4s ease-in-out infinite;
}

@keyframes htPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.28; transform:scale(0.58); }
}

/* ---- LEAGUE DIVIDER (replaces SELECT LEAGUE h2) ---- */
.ht-league-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px auto 4px;
    width: 80%;
    max-width: 320px;
}

.ht-league-divider::before,
.ht-league-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.15), transparent);
}

.ht-league-divider span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.35);
    white-space: nowrap;
    font-style: italic;
}

/* ---- DARK MODE ---- */
.dark-mode .ht-ticket {
    background: #262626;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.dark-mode .ht-ticket:hover { box-shadow: 0 5px 18px rgba(0,0,0,0.5); }
.dark-mode .ht-ticket--glow {
    border-color: rgba(220,53,53,0.32);
    box-shadow: 0 0 0 1px rgba(220,53,53,0.28), 0 3px 14px rgba(220,53,53,0.12);
}
.dark-mode .ht-score     { color: #f0f0f0; }
.dark-mode .ht-score-sep { color: rgba(255,255,255,0.25); }
.dark-mode .ht-vs        { color: rgba(255,255,255,0.25); }
.dark-mode .ht-venue     { color: rgba(255,255,255,0.45); }
.dark-mode .ht-time      { color: rgba(255,255,255,0.5); }
.dark-mode .ht-bar-wrap  { background: rgba(255,255,255,0.08); }
.dark-mode .ht-status--upcoming { color: #5aadff; background: rgba(0,130,255,0.12); }
.dark-mode .ht-status--complete { color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }
.dark-mode .ht-empty     { color: rgba(255,255,255,0.3); }
.dark-mode .ht-league-divider::before,
.dark-mode .ht-league-divider::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
}
.dark-mode .ht-league-divider span { color: rgba(255,255,255,0.3); }

/* ---- SMALL PHONES ---- */
@media (max-width: 374px) {
    .ht-logo  { width: 28px; height: 28px; }
    .ht-score { width: 28px; font-size: 0.88rem; }
    .ht-grid  { gap: 5px; }
    .ht-ticket { padding: 5px 5px 4px; }
}

/* ---- CAROUSEL CARD SIZE REDUCTION ---- */
@media (max-width: 768px) {
    #indexContainer .swiper {
        padding-top: 6px !important;
        padding-bottom: 36px !important;
    }
    #indexContainer .swiper-pagination {
        bottom: 4px !important;
    }
    #indexContainer .swiper-slide {
        height: 178px !important;
    }
    /* Override aspect-ratio which fights the fixed height */
    #indexContainer .swiper-slide .ranking-card {
        aspect-ratio: unset !important;
        height: 100% !important;
    }
    #indexContainer .swiper-slide .ranking-card-front {
        justify-content: flex-start !important;
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    #indexContainer .swiper-slide .ranking-card-front .league-logo {
        width: 100px !important;
        height: 100px !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }
    #indexContainer .swiper-slide .ranking-card-front .league-link {
        font-size: 0.9em !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }
}

/* ---- SEO: visually hidden but crawlable description ---- */
.seo-description {
    display: none;
}

/* ---- RIZZED UP FANTASY H2H HEADER ---- */
#indexContainer header h1 {
    background: linear-gradient(135deg, #007bff 0%, #00c6ff 40%, #007bff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.4));
    animation: h1Entrance 0.8s ease-out forwards, h1Shimmer 6s linear 0.8s infinite;
}

#indexContainer header h1:hover {
    animation: h1ShimmerFast 0.6s linear infinite;
    filter: drop-shadow(0 0 18px rgba(0, 198, 255, 0.65));
}

/* Entrance: fade up from slightly below */
@keyframes h1Entrance {
    0%   { opacity: 0; transform: translateY(8px); filter: drop-shadow(0 0 0px rgba(0,123,255,0)); }
    100% { opacity: 1; transform: translateY(0);   filter: drop-shadow(0 0 12px rgba(0,123,255,0.4)); }
}

/* Idle shimmer — slow and subtle */
@keyframes h1Shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Hover shimmer — fast and bright */
@keyframes h1ShimmerFast {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.dark-mode #indexContainer header h1 {
    background: linear-gradient(135deg, #4da6ff 0%, #00d4ff 40%, #4da6ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 16px rgba(0, 180, 255, 0.5));
    animation: h1Entrance 0.8s ease-out forwards, h1Shimmer 6s linear 0.8s infinite;
}

.dark-mode #indexContainer header h1:hover {
    animation: h1ShimmerFast 0.6s linear infinite;
    filter: drop-shadow(0 0 22px rgba(0, 212, 255, 0.7));
}