/*
 * SKIBIDILII — World Cup 2026 Sitewide Theme
 * Active automatically June 11 – July 19, 2026 (tournament dates)
 * Drop-in CSS: /css/worldcup.css
 * Zero changes to existing styles — uses the site's real .top banner
 * class as the base, just with World Cup colors and a close button.
 */

/* === World Cup banner: same .top structure, tournament-color background ===
   Default colors shown here; worldcup_scores.js overrides this background
   inline with the two competing countries' flag colors while a match is
   live, and resets back to this default otherwise. */
.top.wc-top {
    background: linear-gradient(90deg, #006847 0%, #006847 36%, #ffffff 36%, #ffffff 64%, #ce1126 64%, #ce1126 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    position: relative;
}
.top.wc-top #wc-score-text {
    /* The white middle band needs dark text to stay legible */
    background: rgba(0,0,0,0.18);
    padding: 2px 10px;
    border-radius: 3px;
    display: inline-block;
}
.wc-top-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    padding: 0 7px 2px;
}
.wc-top-close:hover {
    background: rgba(0,0,0,0.4);
}

/* === Nav tab accent stripe === */
body.wc-active nav ul a {
    box-shadow: inset 0 -3px 0 0 #006847;
}
body.wc-active nav ul a#pr_sel {
    box-shadow: inset 0 -3px 0 0 #ce1126;
}

/* === Footer touch === */
body.wc-active footer::before {
    content: "\26BD Celebrating the FIFA World Cup 2026 on SkibidiLii \26BD";
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #006847;
    padding: 6px 0;
}

/* === Soccer-ball channel effect canvas (sitewide, shared with the per-channel toggle) === */
#world_cup_canvas {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* mobile-safe: accounts for the address bar showing/hiding */
    z-index: 999998;
    pointer-events: none;
}