/* ════════════════════════════════════════════════════════════════
   WORLD CUP 2026 — LEADERBOARD LANDING
   Brand palette derived from bermuda.styl:
     purple  #6d1fff   deep #5c18dd
     magenta #ff00a0
     yellow  #ffff04
   ════════════════════════════════════════════════════════════════ */

.world-cup-page {
    --wc-purple: #6d1fff;
    --wc-purple-deep: #5c18dd;
    --wc-magenta: #ff00a0;
    --wc-yellow: #ffff04;
    --wc-gold: #ffd84d;
    --wc-cyan: #22d3ee;
    --wc-green: #34d399;
    --wc-bg-0: #120427;
    --wc-bg-1: #1c0640;
    --wc-card: rgba(28, 8, 64, 0.78);
    --wc-card-2: rgba(18, 5, 42, 0.92);
    --wc-text: rgba(255, 255, 255, 0.92);
    --wc-muted: rgba(255, 255, 255, 0.55);
    --wc-border: rgba(255, 0, 160, 0.18);
    --wc-border-2: rgba(109, 31, 255, 0.22);
    width: 100%;
    color: var(--wc-text);
    font-family: 'DM Sans', 'Roboto', sans-serif;
}

.world-cup-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px 90px;
    line-height: 1.3;
}

/* ─────────────────────────── HERO ─────────────────────────── */
.wc-hero {
    position: relative;
    border-radius: 32px;
    padding: 64px 40px 56px;
    overflow: hidden;
    margin-bottom: 30px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 90% at 50% -10%, rgba(255, 0, 160, 0.28) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 85% 110%, rgba(255, 255, 4, 0.10) 0%, transparent 55%),
        linear-gradient(165deg, #2a0a5e 0%, #1c0640 45%, #14042e 100%);
    border: 1px solid rgba(255, 0, 160, 0.30);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* animated pitch lines */
.wc-hero__pitch {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        repeating-linear-gradient(90deg, transparent 0, transparent 78px, rgba(255, 255, 255, 0.05) 78px, rgba(255, 255, 255, 0.05) 80px);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 80%);
}

/* top shine line */
.wc-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wc-magenta) 30%, var(--wc-yellow) 50%, var(--wc-magenta) 70%, transparent);
    animation: wcShine 3s ease-in-out infinite;
}
@keyframes wcShine { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.wc-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wc-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(255, 0, 160, 0.12);
    border: 1px solid rgba(255, 0, 160, 0.35);
    color: var(--wc-yellow);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.wc-hero__kicker svg { width: 15px; height: 15px; }

.wc-hero__trophy {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wc-yellow);
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 4, 0.22), rgba(255, 0, 160, 0.10));
    border: 2px solid rgba(255, 255, 4, 0.5);
    box-shadow: 0 0 50px rgba(255, 255, 4, 0.25), 0 0 90px rgba(255, 0, 160, 0.18);
    margin-bottom: 20px;
    animation: wcTrophy 3s ease-in-out infinite;
}
.wc-hero__trophy svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 6px rgba(255, 255, 4, 0.4)); }
@keyframes wcTrophy {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 50px rgba(255, 255, 4, 0.25), 0 0 90px rgba(255, 0, 160, 0.18); }
    50% { transform: translateY(-6px); box-shadow: 0 0 70px rgba(255, 255, 4, 0.38), 0 0 120px rgba(255, 0, 160, 0.26); }
}

.wc-hero__title {
    margin: 0;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 56px;
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #ffffff 0%, var(--wc-yellow) 60%, #ffb800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 4px 18px rgba(255, 0, 160, 0.35));
}

.wc-hero__sub {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}

.wc-hero__period {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(109, 31, 255, 0.18);
    border: 1px solid rgba(109, 31, 255, 0.4);
    color: #d9c8ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.wc-hero__period svg { width: 16px; height: 16px; color: var(--wc-magenta); }

/* ── COUNTDOWN ── */
.wc-countdown {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.wc-countdown__cell {
    min-width: 78px;
    padding: 16px 12px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 0, 160, 0.14), rgba(109, 31, 255, 0.10));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(4px);
}
.wc-countdown__num {
    display: block;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 38px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 14px rgba(255, 0, 160, 0.5);
}
.wc-countdown__label {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wc-muted);
    font-weight: 700;
}
.wc-countdown__status {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.25);
    color: var(--wc-green);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wc-countdown__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--wc-green);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
    animation: wcDot 1.5s ease-in-out infinite;
}
@keyframes wcDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── floating particles ── */
.wc-hero__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.wc-hero__particle {
    position: absolute;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--wc-yellow);
    opacity: 0;
    animation: wcFloat linear infinite;
}
.wc-hero__particle:nth-child(1) { left: 8%;  animation-duration: 7s;   animation-delay: 0s;   }
.wc-hero__particle:nth-child(2) { left: 20%; animation-duration: 9s;   animation-delay: 1.2s; background: var(--wc-magenta); }
.wc-hero__particle:nth-child(3) { left: 33%; animation-duration: 6.5s; animation-delay: 2.4s; }
.wc-hero__particle:nth-child(4) { left: 47%; animation-duration: 8.5s; animation-delay: 0.6s; width: 3px; height: 3px; }
.wc-hero__particle:nth-child(5) { left: 61%; animation-duration: 7.5s; animation-delay: 3s;   background: var(--wc-purple); }
.wc-hero__particle:nth-child(6) { left: 74%; animation-duration: 9.5s; animation-delay: 1.8s; }
.wc-hero__particle:nth-child(7) { left: 88%; animation-duration: 6.8s; animation-delay: 2.2s; width: 3px; height: 3px; background: var(--wc-magenta); }
.wc-hero__particle:nth-child(8) { left: 54%; animation-duration: 10s;  animation-delay: 4s;   width: 5px; height: 5px; }
@keyframes wcFloat {
    0%   { transform: translateY(110%) scale(0); opacity: 0; }
    12%  { opacity: 0.9; }
    50%  { opacity: 0.5; }
    90%  { opacity: 0; }
    100% { transform: translateY(-420px) scale(1); opacity: 0; }
}

/* ─────────────────────────── INTRO ─────────────────────────── */
.wc-intro {
    max-width: 760px;
    margin: 0 auto 34px;
    text-align: center;
    color: var(--wc-muted);
    font-size: 15px;
    line-height: 1.7;
}
.wc-intro p { margin: 0 0 12px; }

/* ─────────────────────────── PODIUM ─────────────────────────── */
.wc-section-title {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 26px;
}
.wc-section-title__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 0, 160, 0.35), transparent); }
.wc-section-title__label {
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wc-yellow);
    white-space: nowrap;
}

.wc-podium {
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    align-items: end;
    gap: 18px;
    margin-bottom: 42px;
}

.wc-podium__card {
    position: relative;
    border-radius: 22px;
    padding: 26px 20px 24px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(165deg, var(--wc-card) 0%, var(--wc-card-2) 100%);
    border: 1px solid var(--wc-border-2);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.wc-podium__card:hover { transform: translateY(-6px); }

.wc-podium__card--1 {
    border-color: rgba(255, 216, 77, 0.5);
    background: linear-gradient(165deg, rgba(60, 40, 8, 0.55) 0%, rgba(28, 8, 64, 0.92) 60%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 50px rgba(255, 216, 77, 0.16);
}
.wc-podium__card--2 { border-color: rgba(210, 220, 255, 0.35); }
.wc-podium__card--3 { border-color: rgba(255, 150, 80, 0.35); }

.wc-podium__card::before {
    content: '';
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 180px; height: 120px; border-radius: 50%;
    pointer-events: none;
}
.wc-podium__card--1::before { background: radial-gradient(circle, rgba(255, 216, 77, 0.22), transparent 70%); }
.wc-podium__card--2::before { background: radial-gradient(circle, rgba(210, 220, 255, 0.16), transparent 70%); }
.wc-podium__card--3::before { background: radial-gradient(circle, rgba(255, 150, 80, 0.16), transparent 70%); }

.wc-podium__medal {
    width: 56px; height: 56px; margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900; font-size: 24px;
    position: relative; z-index: 1;
}
.wc-podium__card--1 .wc-podium__medal {
    background: linear-gradient(145deg, #fff2b0, #ffd84d 45%, #f0a500);
    color: #5a3c00;
    box-shadow: 0 0 26px rgba(255, 216, 77, 0.55);
}
.wc-podium__card--2 .wc-podium__medal {
    background: linear-gradient(145deg, #ffffff, #d4dcef 45%, #97a3c0);
    color: #2b3350;
    box-shadow: 0 0 20px rgba(200, 210, 240, 0.4);
}
.wc-podium__card--3 .wc-podium__medal {
    background: linear-gradient(145deg, #ffd0a0, #ff9b54 45%, #cf6a26);
    color: #4a2200;
    box-shadow: 0 0 20px rgba(255, 150, 80, 0.4);
}
.wc-podium__crown {
    position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
    color: var(--wc-yellow); z-index: 2;
    animation: wcTrophy 3s ease-in-out infinite;
}
.wc-podium__crown svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 5px rgba(255, 216, 77, 0.6)); }

.wc-podium__avatar {
    width: 64px; height: 64px; margin: 0 auto 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900; font-size: 26px; color: #fff;
    background: linear-gradient(145deg, var(--wc-magenta), var(--wc-purple));
    border: 2px solid rgba(255, 255, 255, 0.15);
    position: relative; z-index: 1;
    text-transform: uppercase;
}
.wc-podium__card--1 .wc-podium__avatar {
    width: 78px; height: 78px; font-size: 32px;
    background: linear-gradient(145deg, #ffd84d, var(--wc-magenta));
}

.wc-podium__name {
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 800; font-size: 18px; color: #fff;
    margin-bottom: 4px; position: relative; z-index: 1;
    word-break: break-word;
}
.wc-podium__card--1 .wc-podium__name { font-size: 22px; }

.wc-podium__stakes-label {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--wc-muted); font-weight: 700; margin-bottom: 4px;
    position: relative; z-index: 1;
}
.wc-podium__stakes {
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900; font-size: 26px;
    position: relative; z-index: 1;
    background: linear-gradient(135deg, #fff, var(--wc-yellow));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.wc-podium__card--1 .wc-podium__stakes { font-size: 32px; }

/* stand height illusion */
.wc-podium__card--1 { padding-top: 40px; }
.wc-podium__card--2, .wc-podium__card--3 { margin-bottom: 6px; }

/* ─────────────────────────── BOARD (table) ─────────────────────────── */
.wc-board {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--wc-border);
    background: linear-gradient(180deg, var(--wc-card) 0%, var(--wc-card-2) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 20px;
}
.wc-board__head {
    display: grid;
    grid-template-columns: 70px 1fr 200px;
    gap: 12px;
    padding: 16px 24px;
    background: rgba(255, 0, 160, 0.10);
    border-bottom: 1px solid rgba(255, 0, 160, 0.18);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--wc-muted); font-weight: 800;
}
.wc-board__head span:last-child { text-align: right; }

.wc-row {
    display: grid;
    grid-template-columns: 70px 1fr 200px;
    gap: 12px;
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: background 0.25s ease;
    animation: wcRowIn 0.4s ease both;
}
.wc-row:last-child { border-bottom: none; }
.wc-row:hover { background: rgba(109, 31, 255, 0.10); }
@keyframes wcRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wc-row__rank {
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900; font-size: 20px;
    color: var(--wc-muted);
    display: flex; align-items: center; gap: 8px;
}
.wc-row--top .wc-row__rank { color: var(--wc-yellow); }

.wc-row__player {
    display: flex; align-items: center; gap: 14px; min-width: 0;
}
.wc-row__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 800; font-size: 16px; color: #fff;
    background: linear-gradient(145deg, var(--wc-purple), var(--wc-purple-deep));
    text-transform: uppercase;
}
.wc-row__name-wrap { min-width: 0; flex: 1; }
.wc-row__name {
    font-weight: 700; font-size: 15px; color: var(--wc-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wc-row__bar {
    margin-top: 6px;
    height: 5px; width: 100%; max-width: 320px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.wc-row__bar > span {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--wc-purple), var(--wc-magenta) 70%, var(--wc-yellow));
    transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.wc-row__stakes {
    text-align: right;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900; font-size: 19px; color: #fff;
}
.wc-row__stakes small { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--wc-muted); font-weight: 700; text-transform: uppercase; }

/* ─────────────────────────── EMPTY / ERROR ─────────────────────────── */
.wc-empty {
    border: 1px dashed rgba(255, 0, 160, 0.3);
    border-radius: 22px;
    padding: 60px 30px;
    text-align: center;
    color: var(--wc-muted);
    font-size: 16px;
    background: rgba(255, 0, 160, 0.03);
}
.wc-empty svg { width: 48px; height: 48px; opacity: 0.4; margin-bottom: 14px; }

/* ─────────────────────────── HOW IT WORKS ─────────────────────────── */
.wc-how {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 46px;
}
.wc-how__item {
    padding: 26px 22px;
    border-radius: 20px;
    background: linear-gradient(165deg, var(--wc-card) 0%, var(--wc-card-2) 100%);
    border: 1px solid var(--wc-border-2);
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.wc-how__item:hover { transform: translateY(-4px); border-color: rgba(255, 0, 160, 0.4); }
.wc-how__icon {
    width: 54px; height: 54px; margin: 0 auto 16px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: var(--wc-yellow);
    background: rgba(255, 0, 160, 0.10);
    border: 1px solid rgba(255, 0, 160, 0.3);
}
.wc-how__icon svg { width: 26px; height: 26px; }
.wc-how__title {
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.wc-how__text { color: var(--wc-muted); font-size: 13px; line-height: 1.6; }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 900px) {
    .wc-how { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .world-cup-container { padding: 0 12px 60px; }
    .wc-hero { padding: 44px 20px 40px; border-radius: 22px; }
    .wc-hero__title { font-size: 36px; }
    .wc-hero__sub { font-size: 13px; }
    .wc-hero__trophy { width: 74px; height: 74px; }
    .wc-countdown__cell { min-width: 64px; padding: 12px 8px; }
    .wc-countdown__num { font-size: 28px; }

    .wc-podium {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .wc-podium__card--1 { order: -1; padding-top: 30px; }

    .wc-board__head { grid-template-columns: 50px 1fr 110px; padding: 14px 14px; }
    .wc-row { grid-template-columns: 50px 1fr 110px; padding: 12px 14px; }
    .wc-row__avatar { width: 34px; height: 34px; font-size: 14px; }
    .wc-row__bar { display: none; }
    .wc-row__stakes { font-size: 16px; }
    .wc-row__rank { font-size: 17px; }
}
@media (max-width: 420px) {
    .wc-hero__title { font-size: 28px; }
    .wc-countdown { gap: 8px; }
    .wc-countdown__cell { min-width: 56px; }
    .wc-board__head span:nth-child(2) { display: none; }
}

/* ─────────────────────────── LIGHT THEME ─────────────────────────── */
body.light-theme .world-cup-page {
    --wc-card: rgba(255, 255, 255, 0.96);
    --wc-card-2: rgba(250, 244, 255, 0.96);
    --wc-text: rgba(28, 6, 64, 0.92);
    --wc-muted: rgba(28, 6, 64, 0.55);
    --wc-border: rgba(255, 0, 160, 0.2);
    --wc-border-2: rgba(109, 31, 255, 0.18);
}
body.light-theme .wc-board__head { color: var(--wc-purple-deep); }
body.light-theme .wc-row__name { color: #1c0640; }
body.light-theme .wc-row__stakes { color: #1c0640; }
body.light-theme .wc-podium__name { color: #1c0640; }
body.light-theme .wc-podium__stakes {
    background: linear-gradient(135deg, var(--wc-purple-deep), var(--wc-magenta));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.light-theme .wc-how__title { color: #1c0640; }

/* ════════════════════════════════════════════════════════════════
   WOW LAYER — video bg, flying balls, confetti, sweep, ticker
   ════════════════════════════════════════════════════════════════ */

.wc-hero { min-height: 540px; display: flex; align-items: center; justify-content: center; }

/* ── VIDEO BACKGROUND ── */
.wc-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    filter: saturate(1.15) contrast(1.05);
}
.wc-hero__video.is-ready { opacity: 0.55; }

.wc-hero__video-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 90% at 50% -10%, rgba(255, 0, 160, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 50% 120%, rgba(20, 4, 46, 0.95) 0%, transparent 60%),
        linear-gradient(180deg, rgba(20, 4, 46, 0.55) 0%, rgba(28, 6, 64, 0.45) 45%, rgba(20, 4, 46, 0.85) 100%);
}

/* ── LIGHT SWEEP (stadium spotlight) ── */
.wc-hero__sweep {
    position: absolute;
    top: -60%;
    left: -40%;
    width: 60%;
    height: 220%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 4, 0.14) 50%, rgba(255, 255, 255, 0.10) 55%, transparent 100%);
    transform: rotate(8deg);
    filter: blur(6px);
    animation: wcSweep 7s ease-in-out infinite;
}
@keyframes wcSweep {
    0%   { left: -50%; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* ── FLYING / SPINNING FOOTBALLS ── */
.wc-balls {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.wc-ball {
    position: absolute;
    width: 46px;
    height: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' stroke='%23151515' stroke-width='2'/%3E%3Cpolygon points='50,30 64,40 59,57 41,57 36,40' fill='%23151515'/%3E%3Cpath d='M50 3 L63 14 L50 30 L36 18 Z' fill='%23151515'/%3E%3Cpath d='M97 50 L83 60 L64 40 L78 28 Z' fill='%23151515'/%3E%3Cpath d='M3 50 L17 60 L36 40 L22 28 Z' fill='%23151515'/%3E%3Cpath d='M78 92 L62 84 L59 57 L80 64 Z' fill='%23151515'/%3E%3Cpath d='M22 92 L38 84 L41 57 L20 64 Z' fill='%23151515'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
    opacity: 0;
}
/* each ball: independent fly arc + spin via two stacked animations */
.wc-ball--1 { top: 70%; left: -8%;  width: 40px; height: 40px; animation: wcFly1 9s linear infinite, wcSpin 1.4s linear infinite; }
.wc-ball--2 { top: 20%; left: -10%; width: 30px; height: 30px; animation: wcFly2 12s linear infinite 2s, wcSpinR 2s linear infinite; }
.wc-ball--3 { top: 85%; left: -12%; width: 54px; height: 54px; animation: wcFly3 11s linear infinite 4s, wcSpin 1.8s linear infinite; }
.wc-ball--4 { top: 40%; left: -8%;  width: 24px; height: 24px; animation: wcFly2 14s linear infinite 6s, wcSpinR 2.4s linear infinite; }

@keyframes wcSpin  { to { transform: rotate(360deg); } }
@keyframes wcSpinR { to { transform: rotate(-360deg); } }

/* fly paths use margin to move container while transform handles spin */
@keyframes wcFly1 {
    0%   { opacity: 0; left: -8%;  margin-top: 0; }
    8%   { opacity: 1; }
    25%  { margin-top: -120px; }
    50%  { margin-top: 0; }
    75%  { margin-top: -90px; }
    92%  { opacity: 1; }
    100% { opacity: 0; left: 110%; margin-top: 0; }
}
@keyframes wcFly2 {
    0%   { opacity: 0; left: -10%; margin-top: 0; }
    10%  { opacity: 1; }
    40%  { margin-top: 140px; }
    70%  { margin-top: 20px; }
    90%  { opacity: 1; }
    100% { opacity: 0; left: 112%; margin-top: 80px; }
}
@keyframes wcFly3 {
    0%   { opacity: 0; left: -12%; margin-top: 0; }
    9%   { opacity: 1; }
    30%  { margin-top: -160px; }
    55%  { margin-top: -40px; }
    80%  { margin-top: -140px; }
    91%  { opacity: 1; }
    100% { opacity: 0; left: 114%; margin-top: -20px; }
}

/* ── BOUNCING BALL next to the trophy ── */
.wc-hero__trophy { position: relative; }
.wc-hero__trophy::after {
    content: '';
    position: absolute;
    bottom: -6px; right: -14px;
    width: 26px; height: 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='%23ffffff' stroke='%23151515' stroke-width='3'/%3E%3Cpolygon points='50,30 64,40 59,57 41,57 36,40' fill='%23151515'/%3E%3C/svg%3E");
    background-size: contain;
    animation: wcBounce 1.1s ease-in-out infinite, wcSpin 1.1s linear infinite;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
}
@keyframes wcBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

/* ── TITLE: animated gradient shimmer ── */
.wc-hero__title {
    background-size: 200% auto;
    animation: wcTitleShimmer 4s ease-in-out infinite;
}
@keyframes wcTitleShimmer {
    0%, 100% { background-position: 0% center; }
    50%      { background-position: 100% center; }
}

/* ── ENTRANCE animations ── */
.wc-hero__inner > * { animation: wcRise 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.wc-hero__kicker  { animation-delay: 0.05s; }
.wc-hero__trophy  { animation-delay: 0.15s; }
.wc-hero__title   { animation-delay: 0.25s, 0s; }
.wc-hero__sub     { animation-delay: 0.35s; }
.wc-hero__period  { animation-delay: 0.45s; }
.wc-countdown     { animation-delay: 0.55s; }
.wc-countdown__status { animation-delay: 0.65s; }
@keyframes wcRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* podium pop-in */
.wc-podium__card { animation: wcPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; }
.wc-podium__card--2 { animation-delay: 0.05s; }
.wc-podium__card--1 { animation-delay: 0.18s; }
.wc-podium__card--3 { animation-delay: 0.30s; }
@keyframes wcPop { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: none; } }

/* champion glow ring */
.wc-podium__card--1::after {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, var(--wc-yellow), var(--wc-magenta), var(--wc-yellow));
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: wcRingMove 3s linear infinite;
    pointer-events: none;
}
@keyframes wcRingMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ── CONFETTI (champion) ── */
.wc-confetti {
    position: absolute;
    top: 0; left: 0; right: 0; height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    border-radius: inherit;
}
.wc-confetti i {
    position: absolute;
    top: -12px;
    width: 7px; height: 12px;
    opacity: 0;
    animation: wcConfetti linear infinite;
}
@keyframes wcConfetti {
    0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

/* ── TOP-PLAYERS TICKER (marquee) ── */
.wc-ticker {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin: 0 0 34px;
    padding: 12px 0;
    background: linear-gradient(90deg, rgba(255,0,160,0.12), rgba(109,31,255,0.12));
    border: 1px solid rgba(255,0,160,0.2);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wc-ticker__track {
    display: inline-flex;
    white-space: nowrap;
    animation: wcMarquee 30s linear infinite;
}
.wc-ticker:hover .wc-ticker__track { animation-play-state: paused; }
.wc-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 26px;
    font-weight: 700;
    font-size: 14px;
    color: var(--wc-text);
}
.wc-ticker__item b { color: var(--wc-yellow); font-family: 'Oswald','DM Sans',sans-serif; font-weight: 900; }
.wc-ticker__item span { color: var(--wc-magenta); }
.wc-ticker__item::before { content: '⚽'; font-size: 15px; }
@keyframes wcMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .wc-ball, .wc-hero__sweep, .wc-hero__trophy::after, .wc-confetti i, .wc-ticker__track,
    .wc-hero__particle, .wc-podium__crown { animation: none !important; }
    .wc-hero__video { opacity: 0 !important; }
}

@media (max-width: 768px) {
    .wc-hero { min-height: 460px; }
    .wc-ball--3 { width: 38px; height: 38px; }
    .wc-ball--1 { width: 30px; height: 30px; }
}

/* ════════════════════════════════════════════════════════════════
   RULES
   ════════════════════════════════════════════════════════════════ */
.wc-rules {
    position: relative;
    border-radius: 24px;
    padding: 34px 34px 30px;
    margin: 0 0 38px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 100% at 100% 0%, rgba(255, 0, 160, 0.12) 0%, transparent 60%),
        linear-gradient(160deg, var(--wc-card) 0%, var(--wc-card-2) 100%);
    border: 1px solid var(--wc-border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.30);
}
.wc-rules::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--wc-yellow), var(--wc-magenta), var(--wc-purple));
}

.wc-rules__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}
.wc-rules__icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--wc-yellow);
    background: rgba(255, 0, 160, 0.12);
    border: 1px solid rgba(255, 0, 160, 0.3);
}
.wc-rules__icon svg { width: 24px; height: 24px; }
.wc-rules__title {
    margin: 0;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 26px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.wc-rules__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.wc-rules__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--wc-text);
    font-size: 15px;
    line-height: 1.55;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.wc-rules__item:hover {
    transform: translateX(4px);
    border-color: rgba(255, 0, 160, 0.3);
    background: rgba(255, 0, 160, 0.05);
}
.wc-rules__check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
    color: #fff;
    background: linear-gradient(145deg, var(--wc-magenta), var(--wc-purple));
    box-shadow: 0 2px 8px rgba(255, 0, 160, 0.4);
}
.wc-rules__check svg { width: 14px; height: 14px; }
.wc-rules__item b { color: var(--wc-yellow); font-weight: 800; }

@media (max-width: 768px) {
    .wc-rules { padding: 24px 20px 22px; border-radius: 18px; }
    .wc-rules__title { font-size: 21px; }
    .wc-rules__item { font-size: 14px; padding: 14px 14px; }
}

body.light-theme .wc-rules__title { color: #1c0640; }
body.light-theme .wc-rules__item { color: var(--wc-text); }

/* ════════════════════════════════════════════════════════════════
   PRIZES
   ════════════════════════════════════════════════════════════════ */
.wc-prizes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.wc-prize-card {
    position: relative;
    border-radius: 24px;
    padding: 30px 28px 28px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(165deg, var(--wc-card) 0%, var(--wc-card-2) 100%);
    border: 1px solid var(--wc-border-2);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.wc-prize-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.wc-prize-card::before {
    content: '';
    position: absolute;
    top: -80px; left: 50%; transform: translateX(-50%);
    width: 280px; height: 200px; border-radius: 50%;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* weekly (cyan / purple) */
.wc-prize-card--weekly { border-color: rgba(34, 211, 238, 0.3); }
.wc-prize-card--weekly::before { background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 70%); }
.wc-prize-card--weekly:hover { border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 50px rgba(34, 211, 238, 0.14); }

/* grand (gold / magenta) */
.wc-prize-card--grand { border-color: rgba(255, 216, 77, 0.4); background: linear-gradient(165deg, rgba(54, 36, 8, 0.55) 0%, rgba(18, 5, 42, 0.94) 60%); }
.wc-prize-card--grand::before { background: radial-gradient(circle, rgba(255, 216, 77, 0.2), transparent 70%); }
.wc-prize-card--grand:hover { border-color: rgba(255, 216, 77, 0.6); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 60px rgba(255, 216, 77, 0.18); }

/* animated ring on grand card */
.wc-prize-card--grand::after {
    content: '';
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, var(--wc-yellow), var(--wc-magenta), var(--wc-yellow));
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: wcRingMove 3.5s linear infinite;
    pointer-events: none;
}

.wc-prize-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    margin-bottom: 6px;
}
.wc-prize-card--weekly .wc-prize-card__badge { color: var(--wc-cyan); background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.35); }
.wc-prize-card--grand .wc-prize-card__badge { color: var(--wc-yellow); background: rgba(255, 216, 77, 0.12); border: 1px solid rgba(255, 216, 77, 0.4); }
.wc-prize-card__badge svg { width: 13px; height: 13px; }

.wc-prize-card__art {
    position: relative;
    z-index: 1;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0 4px;
    animation: wcPrizeFloat 3.5s ease-in-out infinite;
}
.wc-prize-card__art svg { max-height: 100%; width: auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5)); }
@keyframes wcPrizeFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.wc-prize-card__title {
    position: relative;
    z-index: 1;
    font-family: 'Oswald', 'DM Sans', sans-serif;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 6px 0 6px;
    color: #fff;
}
.wc-prize-card--grand .wc-prize-card__title {
    background: linear-gradient(135deg, #fff, var(--wc-yellow));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.wc-prize-card__desc {
    position: relative;
    z-index: 1;
    color: var(--wc-muted);
    font-size: 14px;
    line-height: 1.6;
    max-width: 340px;
    margin: 0 auto 14px;
}
.wc-prize-card__tag {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wc-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.wc-prize-card__tag b { color: var(--wc-yellow); font-weight: 800; }

@media (max-width: 768px) {
    .wc-prizes { grid-template-columns: 1fr; gap: 14px; }
    .wc-prize-card { padding: 24px 20px; }
    .wc-prize-card__title { font-size: 23px; }
    .wc-prize-card__art { height: 120px; }
}

body.light-theme .wc-prize-card__title { color: #1c0640; }
body.light-theme .wc-prize-card--grand .wc-prize-card__title {
    background: linear-gradient(135deg, var(--wc-purple-deep), #b8860b);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}