a,a:focus,a:hover{color:#fff;text-decoration:none}.btn-default{color:#fff;text-shadow:none;background-color:transparent;border:2px solid #fff;border-radius:20px;padding:.5rem 2rem}.btn-default:hover,.btn-default:focus{background-color:rgba(255,255,255,.3)}html,body{min-height:100vh;min-height:100dvh}body{background:url(../images/cover.jpg) no-repeat center center fixed;background-size:cover;color:#fff;text-align:center;font-family:quicksand,sans-serif}#backgroundVideo{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;position:fixed;top:0;left:0}.site-wrapper{position:relative;min-height:100vh;min-height:100dvh;text-align:center;display:flex;align-items:center;justify-content:center;display:table;width:100%;background:rgba(48,53,70,.5);box-shadow:inset 0 0 100px rgba(0,0,0,.5)}.site-wrapper-inner{display:table-cell;vertical-align:top}.cover-container{margin-right:auto;margin-left:auto}.inner{padding:30px}.masthead-brand{margin-top:10px;margin-bottom:10px}.nav-masthead{text-align:center;display:block}.nav-masthead .nav-link{display:inline-block}@media(min-width:768px){.masthead-brand{float:left}.nav-masthead{float:right}}.cover{padding:0 20px}.cover .btn-notify{padding:10px 60px;font-weight:500;text-transform:uppercase;border-radius:40px}.cover-heading{font-weight:500;text-transform:uppercase;letter-spacing:10px;font-size:2.5rem;margin-bottom:2rem}.cover-copy{max-width:500px;font-size:1rem;margin:0 auto 1rem}@media(min-width:768px){.cover-heading{font-size:3.4rem;letter-spacing:15px}.cover-copy{font-size:1.25rem}}.mastfoot{color:#999;color:rgba(255,255,255,.5)}#timer{min-height:150px}#timer div{display:inline-block;line-height:1;text-align:center;padding:20px 10px;min-height:80px;width:80px;margin-bottom:1rem}#timer span{display:block;margin-top:.6rem;font-size:.8rem;text-transform:uppercase;text-align:center;letter-spacing:.6px}#days{font-size:2rem}#hours{font-size:2rem}#minutes{font-size:2rem}#seconds{font-size:1.5rem}@media(min-width:768px){#timer{min-height:200px}#timer div{padding:20px;min-height:100px;width:120px;margin-bottom:3rem}#days{font-size:5rem;min-width:220px;}#hours{font-size:5rem}#minutes{font-size:5rem}#seconds{font-size:3rem}}@media(min-width:768px){.masthead{position:fixed;top:0}.mastfoot{position:fixed;bottom:0}.site-wrapper-inner{vertical-align:middle}.masthead,.mastfoot,.cover-container{width:100%}}@media(min-width:992px){.masthead,.mastfoot,.cover-container{width:1060px}}
#play-pause-toggle {
    /* Fixed Positioning */
    /*position: fixed;*/
    /*bottom: 20px;*/
    /*left: 20px;*/
    /*z-index: 1000;       */

    /* MODERN STYLING */
    /*font-family: 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;*/
    font-size: 16px;
    padding: 8px 18px; 
    
    /* Apple Glass Look */
    background-color: rgba(255, 255, 255, 0.15);
    /*backdrop-filter: blur(10px) saturate(180%);*/
    /*-webkit-backdrop-filter: blur(10px) saturate(180%);*/
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Light, subtle border */
    border-radius: 16px; /* Slightly more rounded for glass aesthetic */
    
    color: #f0f0f0; /* Very light text for contrast */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */

    width: auto;
    white-space: nowrap;
    
    /* Soft, diffused shadow */
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4), /* Main shadow */
        0 1px 4px rgba(0, 0, 0, 0.2); /* Smaller highlight shadow */
    
    cursor: pointer;
    line-height: 1;
    outline: none; 
    text-align: center;
    
    /* Transition for Smooth Effects */
    transition: all 0.2s ease-in-out;
}

/* ================================
2. INTERACTION STYLES
================================
*/
/*#play-pause-toggle:hover {*/
/*    background-color: rgba(255, 255, 255, 0.25);*/
/*    border-color: rgba(255, 255, 255, 0.3);*/
/*    box-shadow: */
/*        0 6px 16px rgba(0, 0, 0, 0.5),*/
/*        0 2px 6px rgba(0, 0, 0, 0.3); */
/*    transform: translateY(-1px);*/
/*}*/

#play-pause-toggle:active {
    background-color: rgba(255, 255, 255, 0.1); /* Darken slightly on click */
    border-color: rgba(255, 255, 255, 0.15); /* Subtler border */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Reduce shadow */
    transform: translateY(0);
}

/* ================================
3. MOBILE RESPONSIVENESS (<= 640px)
================================
*/
@media (max-width: 640px) {
    #play-pause-toggle {
        min-width: unset; 
        width: 44px;
        height: 44px;
        padding: 8px;
        border-radius: 50%; /* Circular for mobile icon */
        /*display: flex;*/
        justify-content: center;
        align-items: center;
        font-size: 18px; /* Slightly larger icon on mobile */
    }
}

.product-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* Increased space */
    margin-top: 40px;
    padding-bottom: 40px;
    z-index: 100;
    position: relative;
}

.product-btn {
    background-color: rgba(255, 255, 255, 0.15); /* Exact match */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 16px 42px; /* Bigger button */
    border-radius: 20px;
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.product-btn img {
    height: 42px; /* Sized for the larger button */
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    position: relative;
    z-index: 1;
}

/* ── World Cup 2026 (glowing trophy, no button chrome) ─────────────────── */
.product-btn-wc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.wc-trophy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 120px;
    transition: transform 0.2s ease-in-out;
}

.product-btn-wc:hover .wc-trophy {
    transform: translateY(-2px) scale(1.04);
}

.wc-trophy img {
    height: 120px;
    width: auto;
}

/* pulsing gold halo behind the trophy */
.trophy-glow {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(247, 200, 67, 0.62) 0%,
        rgba(247, 200, 67, 0.28) 42%,
        rgba(247, 200, 67, 0) 72%
    );
    filter: blur(26px);
    animation: trophy-glow 3.4s ease-in-out infinite;
    will-change: opacity, transform;
    z-index: 0;
}

.trophy-shimmer {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 22px rgba(247, 200, 67, 0.5));
    animation: trophy-bob 3.4s ease-in-out infinite;
    will-change: transform;
}

@keyframes trophy-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes trophy-glow {
    0%, 100% { opacity: 0.35; transform: scale(0.92); }
    50% { opacity: 0.72; transform: scale(1.06); }
}

.product-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.3); 
    transform: translateY(-1px);
}

.product-btn:active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
}

@media (max-width: 992px) {
    .product-button-container {
        gap: 40px;
    }
    .product-btn {
        padding: 12px 32px;
        border-radius: 18px;
    }
    .product-btn img {
        height: 34px;
    }
    .wc-trophy, .wc-trophy img {
        height: 96px;
    }
    .wc-trophy {
        width: 96px;
    }
}

@media (max-width: 768px) {
    /* stack: World Cup on its own row first, Savrz + Untap together below */
    .product-button-container {
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 30px;
    }
    .product-btn-wc {
        order: -1;
        flex-basis: 100%;
    }
    .product-btn {
        padding: 14px 30px;
        border-radius: 18px;
    }
    .product-btn img {
        height: 40px;
    }
    .wc-trophy, .wc-trophy img {
        height: 150px;
    }
    .wc-trophy {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .product-button-container {
        gap: 15px;
    }
    .product-btn {
        padding: 12px 24px;
        border-radius: 16px;
    }
    .product-btn img {
        height: 34px;
    }
    .wc-trophy, .wc-trophy img {
        height: 128px;
    }
    .wc-trophy {
        width: 128px;
    }
}

/* ================================
4. PREVENT HORIZONTAL OVERFLOW / INITIAL ZOOM ON MOBILE
================================
*/
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* The countdown row was 342px wide; with the .inner side padding it pushed
   the page past the viewport, so mobile browsers opened zoomed-out. Shrink
   the timer cells on small screens so everything fits within device-width. */
@media (max-width: 640px) {
    #timer div {
        width: 64px;
        padding: 15px 6px;
        box-sizing: border-box;
    }
    #days, #hours, #minutes {
        font-size: 1.6rem;
    }
    #seconds {
        font-size: 1.3rem;
    }
}