/* ─────────────────────────────────────────────
   GLOBAL RESET / BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

/* ─────────────────────────────────────────────
   ADMIN STYLES
───────────────────────────────────────────── */
.dashboard-card {
    transition: transform .2s ease, box-shadow .2s ease;
    cursor: pointer;
    user-select: none;
}
.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.15) !important;
}
/* Subtle muted subtitle text on admin pages */
.admin-subtitle {
    color: #757575;
}
/* Leaderboard widget table inside admin */
.admin-lb-table .mud-table-row:first-child td {
    background: rgba(255, 215, 0, .06);
}
.admin-lb-table .mud-table-row:nth-child(2) td {
    background: rgba(192, 192, 192, .06);
}
.admin-lb-table .mud-table-row:nth-child(3) td {
    background: rgba(205, 127, 50, .06);
}

/* Danger zone panel */
.danger-zone {
    border: 1px solid rgba(244, 67, 54, .35);
    background: rgba(244, 67, 54, .04);
}

/* ─────────────────────────────────────────────
   LEADERBOARD PAGE
   Dark, cinematic big-screen design
───────────────────────────────────────────── */
.lb-page {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #1a1a3e 0%, #0a0a1a 60%);
    color: #fff;
    overflow: hidden;
    padding-bottom: 2rem;
}

/* Header */
.lb-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #FFD700, #FFF8DC, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(255,215,0,.4));
}
.lb-header-icon {
    -webkit-text-fill-color: initial;
    font-size: clamp(1.5rem, 4vw, 3rem);
}
.lb-header-edition {
    /* Override the parent's transparent gradient fill with a solid visible colour */
    -webkit-text-fill-color: rgba(255, 236, 153, 0.9);
    font-size: clamp(1rem, 2.5vw, 1.8rem);
    font-weight: 400;
    letter-spacing: .1em;
}

/* Container */
.lb-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
    transition: opacity .4s ease;
}
.lb-visible { opacity: 1; }
.lb-hidden  { opacity: 0; pointer-events: none; }

/* Empty state */
.lb-empty {
    text-align: center;
    padding: 5rem 2rem;
    opacity: .6;
}

/* ── Leaderboard row ─────────────────────────── */
.lb-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.2rem;
    margin-bottom: .6rem;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(4px);
    animation: slideIn .5s both ease-out;
    transition: background .4s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Top 3 row variants */
.lb-row-gold {
    background: linear-gradient(90deg, rgba(255,215,0,.18), rgba(255,215,0,.06));
    border-color: rgba(255,215,0,.35);
    box-shadow: 0 0 20px rgba(255,215,0,.12);
}
.lb-row-silver {
    background: linear-gradient(90deg, rgba(192,192,192,.18), rgba(192,192,192,.06));
    border-color: rgba(192,192,192,.35);
}
.lb-row-bronze {
    background: linear-gradient(90deg, rgba(205,127,50,.18), rgba(205,127,50,.06));
    border-color: rgba(205,127,50,.35);
}

/* Rank change flash animations */
.lb-row-improved {
    animation: slideIn .5s both ease-out, flashGreen 1.2s ease 0.6s;
}
.lb-row-dropped {
    animation: slideIn .5s both ease-out, flashRed 1.2s ease 0.6s;
}

@keyframes flashGreen {
    0%, 100% { background: rgba(255,255,255,.06); }
    50%       { background: rgba(76,175,80,.3); box-shadow: 0 0 24px rgba(76,175,80,.4); }
}
@keyframes flashRed {
    0%, 100% { background: rgba(255,255,255,.06); }
    50%       { background: rgba(244,67,54,.25); box-shadow: 0 0 24px rgba(244,67,54,.3); }
}

/* Rank badge */
.lb-rank {
    flex: 0 0 4rem;
    text-align: center;
}
.lb-medal {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes popIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
.lb-rank-num {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.8rem);
    font-weight: 600;
    color: rgba(255,255,255,.55);
}

/* Team name */
.lb-team-name {
    flex: 1;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 2rem);
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stats */
.lb-stats {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lb-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3rem;
}
.lb-stat-label {
    font-size: .6rem;
    letter-spacing: .08em;
    opacity: .55;
    text-transform: uppercase;
}
.lb-stat-value {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.9rem, 2.5vw, 1.4rem);
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}

/* Rank change arrow */
.lb-change {
    flex: 0 0 2rem;
    text-align: center;
}
.lb-arrow {
    font-size: 1.1rem;
    font-weight: 700;
}
.lb-arrow.up   { color: #4caf50; }
.lb-arrow.down { color: #f44336; }
.lb-arrow.same { color: rgba(255,255,255,.3); }

/* ── Overlay ─────────────────────────────────── */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(10,10,40,.97) 0%, rgba(0,0,0,.98) 100%);
    animation: overlayIn .3s ease;
}
@keyframes overlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lb-overlay-inner {
    text-align: center;
}

.lb-trophy-bounce {
    font-size: clamp(4rem, 12vw, 8rem);
    animation: trophyBounce 1s infinite ease-in-out;
    display: block;
}
@keyframes trophyBounce {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-20px) scale(1.1); }
}

.lb-overlay-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: .2em;
    background: linear-gradient(90deg, #FFD700, #fff, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titlePulse 1s infinite ease-in-out;
    margin-top: 1rem;
}
@keyframes titlePulse {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.4) drop-shadow(0 0 20px #FFD700); }
}

.lb-overlay-sub {
    font-size: clamp(.9rem, 2.5vw, 1.4rem);
    opacity: .65;
    margin-top: .5rem;
    letter-spacing: .05em;
}

.lb-countdown {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 700;
    color: #FFD700;
    line-height: 1;
    margin-top: 1.5rem;
    animation: countPop .8s cubic-bezier(.34,1.56,.64,1) both;
    text-shadow: 0 0 40px rgba(255,215,0,.6);
}
@keyframes countPop {
    from { transform: scale(2); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── Status banner (Currently Playing / Entering results) ── */
.lb-status-banner {
    display: flex;
    width: fit-content;
    max-width: 90%;
    align-items: center;
    gap: .6rem;
    margin: 0 auto 1.8rem;
    padding: .45rem 1.6rem;
    border-radius: 999px;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.85rem, 2.2vw, 1.1rem);
    letter-spacing: .06em;
    animation: fadeInUp .4s ease both;
}
.lb-status-live {
    background: rgba(244, 67, 54, .18);
    border: 1px solid rgba(244, 67, 54, .4);
    color: #ff8a80;
}
.lb-status-entry {
    background: rgba(255, 193, 7, .12);
    border: 1px solid rgba(255, 193, 7, .35);
    color: #ffe082;
}

/* Pulsing red dot for "live" */
.lb-live-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: #f44336;
    flex-shrink: 0;
    animation: livePulse 1.2s infinite ease-in-out;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244,67,54,.6); }
    50%       { opacity: .7; box-shadow: 0 0 0 6px rgba(244,67,54,0); }
}

/* ── Subtle admin entry dot ──────────────────── */
.lb-admin-entry {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(255,255,255,.18);
    text-decoration: none;
    border-radius: 50%;
    transition: color .3s ease, background .3s ease;
    z-index: 10;
    letter-spacing: -.05em;
}
.lb-admin-entry:hover {
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.08);
}

/* ── Alphabetical notice banner ──────────────── */
.lb-alpha-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 1.5rem;
    padding: .75rem 1.2rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(255, 255, 255, .2);
    font-size: clamp(.75rem, 2vw, .95rem);
    color: rgba(255, 255, 255, .55);
    letter-spacing: .03em;
    animation: fadeInUp .6s ease both;
}
.lb-alpha-icon { font-size: 1.1rem; flex-shrink: 0; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   RESPONSIVE: phone data-entry adjustments
───────────────────────────────────────────── */
@media (max-width: 600px) {
    .lb-row { padding: .7rem .8rem; }
    .lb-stat-label { font-size: .55rem; }
    .lb-stat-value { font-size: .9rem; }
}