/* BattleRanker indextest.php promotional homepage */

.home-promo-battles{
    padding:44px 0 48px;
    background:
        radial-gradient(circle at 10% 5%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 310px),
        linear-gradient(180deg,var(--theme-role-surface-0b1023) 0%,var(--theme-role-surface-0d1229) 100%);
    color:var(--theme-role-text-fff);
}

.home-promo-intro{
    max-width:820px;
    margin:0 auto 44px;
    text-align:center;
}
.home-promo-intro>span{
    color:var(--theme-role-text-e7ff00);
    font-size:10px;
    font-weight:1000;
    letter-spacing:.12em;
}
.home-promo-intro h2{
    margin:9px 0 8px;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:clamp(36px,4.4vw,62px);
    line-height:.9;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-1.4px;
}
.home-promo-intro p{
    margin:0;
    color:var(--theme-role-text-9ca6ba);
    font-size:13px;
    font-weight:750;
}

.home-promo-section{
    margin:0 0 48px;
}
.home-promo-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid var(--theme-role-border-343d5c);
}
.home-promo-section-head small{
    display:block;
    margin-bottom:5px;
    color:var(--theme-role-text-e7ff00);
    font-size:9px;
    font-weight:1000;
    letter-spacing:.1em;
}
.home-promo-section-head h2{
    margin:0;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:clamp(38px,3.5vw,54px);
    line-height:.88;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-1px;
}

.home-promo-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.home-promo-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--theme-role-border-404a68);
    border-radius:15px;
    background:var(--theme-role-surface-11172e);
    box-shadow:0 9px 22px var(--theme-role-shadow-rgba-0-0-0-22-41d185);
    transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}
.home-promo-card:hover{
    transform:translateY(-3px);
    border-color:var(--theme-role-border-697596);
    box-shadow:0 13px 28px var(--theme-role-shadow-rgba-0-0-0-29-15c13d);
}
.home-promo-card-main{
    display:block;
    color:var(--theme-role-text-fff);
    text-decoration:none;
}

.home-promo-art{
    position:relative;
    display:block;
    height:280px;
    overflow:hidden;
    isolation:isolate;
    background:var(--theme-role-surface-0a0f22);
}
.home-promo-side{
    position:absolute;
    top:0;
    bottom:0;
    width:55%;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    background:
        radial-gradient(circle at 50% 40%,var(--theme-role-surface-rgba-231-255-0-06-6e76e4),transparent 46%),
        var(--theme-role-surface-151b35);
}
.home-promo-left{
    left:0;
    z-index:3;
    clip-path:polygon(0 0,100% 0,89% 100%,0 100%);
}
.home-promo-right{
    right:0;
    z-index:1;
}
.home-promo-side img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 24%;
    transition:transform .2s ease;
}
.home-promo-card:hover .home-promo-side img{transform:scale(1.035);}
.home-promo-side::after{
    content:"";
    position:absolute;
    inset:45% 0 0;
    z-index:2;
    background:linear-gradient(transparent,var(--theme-role-surface-rgba-3-6-12-88-3a4548));
    pointer-events:none;
}
.home-promo-side>b{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--theme-role-text-e7ff00);
    font-size:54px;
    font-style:italic;
    font-weight:1000;
}
.home-promo-side em{
    position:relative;
    z-index:4;
    display:block;
    width:100%;
    padding:13px 13px 14px;
    overflow:hidden;
    color:var(--theme-role-text-fff);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:13px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    text-overflow:ellipsis;
    text-shadow:1px 2px 3px var(--theme-role-shadow-000);
    text-transform:uppercase;
    white-space:nowrap;
}
.home-promo-right em{text-align:right;}

.home-promo-art::after{
    content:"";
    position:absolute;
    left:51.35%;
    top:-9%;
    z-index:5;
    width:2px;
    height:118%;
    background:var(--theme-role-surface-080b14);
    transform:rotate(7.2deg);
    transform-origin:center;
}
.home-promo-vs{
    position:absolute;
    left:51.35%;
    top:50%;
    z-index:7;
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    transform:translate(-50%,-50%) rotate(-6deg);
    border:2px solid var(--theme-role-border-080b14);
    border-radius:50%;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-080b14);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:14px;
    font-style:italic;
    font-weight:1000;
    box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-13-18-40-82-17516d),0 5px 12px var(--theme-role-shadow-rgba-0-0-0-36-7bc0bc);
}

.home-promo-copy{
    display:block;
    min-height:164px;
    padding:18px;
    background:
        linear-gradient(135deg,var(--theme-role-surface-rgba-231-255-0-035-32b2f9),transparent 52%),
        var(--theme-role-surface-121a33);
}
.home-promo-copy>small{
    display:block;
    margin-bottom:8px;
    color:var(--theme-role-text-8f99b0);
    font-size:8px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:.35px;
    text-transform:uppercase;
}
.home-promo-copy>strong{
    display:block;
    min-height:54px;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:28px;
    line-height:.94;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.5px;
    text-transform:uppercase;
}
.home-promo-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    margin-top:16px;
    border:1px solid var(--theme-role-border-e7ff00);
    border-radius:7px;
    background:var(--theme-role-surface-e7ff00);
    color:var(--theme-role-text-0b1020);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:14px;
    font-style:italic;
    font-weight:1000;
    letter-spacing:.2px;
    box-shadow:3px 3px 0 var(--theme-role-shadow-05070d);
}
.home-promo-bolt{
    width:14px;
    height:18px;
}
.home-promo-bolt svg{
    display:block;
    width:100%;
    height:100%;
}
.home-promo-bolt path{fill:currentColor;}

.home-promo-browse-all{
    margin-top:8px;
    padding-top:6px;
}
.home-promo-browse-all>a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:132px;
    padding:26px 34px;
    border:2px solid var(--theme-role-border-e7ff00);
    border-radius:14px;
    background:
        radial-gradient(circle at 88% 50%,var(--theme-role-surface-rgba-231-255-0-10-7c0c34),transparent 240px),
        var(--theme-role-surface-12192f);
    color:var(--theme-role-text-fff);
    text-decoration:none;
    box-shadow:0 7px 0 var(--theme-role-shadow-rgba-0-0-0-26-5f9bcc);
    transition:transform .16s ease,background .16s ease;
}
.home-promo-browse-all>a:hover{
    transform:translateY(-2px);
    background:
        radial-gradient(circle at 88% 50%,var(--theme-role-surface-rgba-231-255-0-15-e82150),transparent 260px),
        var(--theme-role-surface-161e37);
}
.home-promo-browse-all small{
    display:block;
    margin-bottom:5px;
    color:var(--theme-role-text-a4adbf);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}
.home-promo-browse-all strong{
    display:block;
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:clamp(32px,4vw,54px);
    line-height:.9;
    font-style:italic;
    font-weight:1000;
    letter-spacing:-.9px;
}
.home-promo-browse-all b{
    flex:0 0 auto;
    color:var(--theme-role-text-e7ff00);
    font-size:62px;
    line-height:1;
}

@media(max-width:1050px){
    .home-promo-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .home-promo-card:nth-child(3){
        display:none;
    }
}

@media(max-width:720px){
    .home-promo-battles{padding:30px 0 34px;}
    .home-promo-intro{
        margin-bottom:32px;
        text-align:left;
    }
    .home-promo-intro h2{font-size:38px;}
    .home-promo-section{margin-bottom:36px;}
    .home-promo-section-head{margin-bottom:12px;}
    .home-promo-section-head h2{font-size:36px;}

    .home-promo-grid{
        display:flex;
        gap:12px;
        margin-right:-14px;
        padding-right:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }
    .home-promo-grid::-webkit-scrollbar{display:none;}
    .home-promo-card,
    .home-promo-card:nth-child(3){
        display:block;
        flex:0 0 86%;
        width:86%;
        scroll-snap-align:start;
    }

    .home-promo-art{height:238px;}
    .home-promo-copy{
        min-height:148px;
        padding:15px 15px 16px;
    }
    .home-promo-copy>strong{
        min-height:46px;
        font-size:25px;
    }
    .home-promo-browse-all>a{
        min-height:112px;
        padding:20px;
    }
    .home-promo-browse-all b{font-size:44px;}
}

@media(max-width:420px){
    .home-promo-card{
        flex-basis:89%;
        width:89%;
    }
    .home-promo-art{height:220px;}
    .home-promo-side em{font-size:11px;}
    .home-promo-vs{
        width:42px;
        height:42px;
        font-size:11px;
    }
    .home-promo-copy>small{font-size:7.5px;}
    .home-promo-copy>strong{font-size:23px;}
}


/* ================================================================
   indextest promo V1.1 — category View All routes
   Desktop: heading link.
   Mobile: fourth swipe card matching the battle-card footprint.
   ================================================================ */

.home-promo-view-all-desktop{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--theme-role-border-46516e);
    border-radius:7px;
    background:var(--theme-role-surface-12192f);
    color:var(--theme-role-text-dfe4ee) !important;
    text-decoration:none;
    font-size:10px !important;
    font-weight:950;
    letter-spacing:.04em;
}

.home-promo-view-all-desktop:hover{
    border-color:var(--theme-role-border-e7ff00);
    color:var(--theme-role-text-e7ff00) !important;
    background:var(--theme-role-surface-171f39);
}

/* Hidden on desktop/tablet; mobile turns this into the natural 4th swipe card. */
.home-promo-view-all-card{
    display:none;
}

@media(max-width:720px){
    .home-promo-view-all-desktop{
        display:none;
    }

    .home-promo-view-all-card,
    .home-promo-view-all-card:nth-child(4){
        display:block !important;
        flex:0 0 86%;
        width:86%;
        min-height:386px;
        scroll-snap-align:start;
        border:1px dashed var(--theme-role-border-56617e);
        background:
            radial-gradient(circle at 50% 42%,var(--theme-role-surface-rgba-231-255-0-08-1625d1),transparent 170px),
            var(--theme-role-surface-11182f);
    }

    .home-promo-view-all-card>a{
        display:flex;
        min-height:386px;
        height:100%;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:8px;
        padding:24px;
        color:var(--theme-role-text-fff);
        text-align:center;
        text-decoration:none;
    }

    .home-promo-view-all-icon{
        display:grid;
        place-items:center;
        width:58px;
        height:58px;
        margin-bottom:6px;
        border:2px solid var(--theme-role-border-e7ff00);
        border-radius:50%;
        color:var(--theme-role-text-e7ff00);
        font-size:32px;
        line-height:1;
        font-weight:1000;
    }

    .home-promo-view-all-card strong{
        color:var(--theme-role-text-fff);
        font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
        font-size:32px;
        line-height:.9;
        font-style:italic;
        font-weight:1000;
        letter-spacing:-.5px;
    }

    .home-promo-view-all-card small{
        color:var(--theme-role-text-9ca6ba);
        font-size:9px;
        font-weight:900;
        letter-spacing:.08em;
    }
}

@media(max-width:420px){
    .home-promo-view-all-card,
    .home-promo-view-all-card:nth-child(4){
        flex-basis:89%;
        width:89%;
        min-height:368px;
    }

    .home-promo-view-all-card>a{
        min-height:368px;
    }
}


/* ================================================================
   indextest promo V1.1.1 — mobile View All arrow vertical nudge
   ================================================================ */
@media(max-width:720px){
    .home-promo-view-all-icon{
        transform:translateY(-3px);
    }
}


/* ================================================================
   Promo homepage — Songs special treatment
   Restores the old homepage Songs identity:
   - SongCoverImagePath gets one full-width cover image.
   - Missing song imagery gets a vinyl/music-note fallback.
   - Copy area gets the large faded music-note watermark.
   ================================================================ */

.home-promo-song-card .home-promo-copy{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.home-promo-song-card .home-promo-copy::after{
    content:"♫";
    position:absolute;
    z-index:0;
    top:28px;
    right:18px;
    color:var(--theme-role-text-e7ff00);
    font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;
    font-size:118px;
    line-height:.8;
    font-style:normal;
    font-weight:1000;
    opacity:.10;
    transform:rotate(-8deg);
    transform-origin:center;
    pointer-events:none;
    user-select:none;
}

.home-promo-song-card .home-promo-copy > small,
.home-promo-song-card .home-promo-copy > strong,
.home-promo-song-card .home-promo-copy > .home-promo-cta{
    position:relative;
    z-index:1;
}

/* Dedicated soundtrack / album cover image: one clean image, never duplicated. */
.home-promo-song-card .home-promo-art-single::after,
.home-promo-song-card .home-promo-art-single .home-promo-vs{
    display:none !important;
}

.home-promo-song-cover{
    position:absolute;
    inset:0;
    display:block;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 40%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 40%),
        var(--theme-role-surface-0b1024);
}

.home-promo-song-cover img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .2s ease;
}

.home-promo-song-card:hover .home-promo-song-cover img{
    transform:scale(1.025);
}

/* Intentional vinyl fallback for Songs entries with no image. */
.home-promo-song-fallback{
    align-items:flex-end;
    justify-content:center;
    background:
        radial-gradient(circle at 50% 45%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 42%),
        var(--theme-role-surface-11172e) !important;
}

.home-promo-song-fallback::before{
    content:"";
    position:absolute;
    left:50%;
    top:47%;
    z-index:1;
    width:118px;
    height:118px;
    transform:translate(-50%,-50%);
    border:1px solid var(--theme-role-border-6675a6);
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-d7e1ff) 0 5px,var(--theme-role-surface-a8b4da) 5px 8px,transparent 8px),
        repeating-radial-gradient(circle at 50% 50%,var(--theme-role-surface-rgba-255-255-255-08-0f1c00) 0 1px,var(--theme-role-surface-rgba-255-255-255-0-4babd7) 1px 7px),
        radial-gradient(circle at 32% 28%,var(--theme-role-surface-rgba-255-255-255-18-0d41ca),var(--theme-role-surface-rgba-255-255-255-0-4babd7) 28%),
        radial-gradient(circle at 50% 50%,var(--theme-role-surface-2a355b) 0 23%,var(--theme-role-surface-121a33) 23% 42%,var(--theme-role-surface-0a1020) 42% 72%,var(--theme-role-surface-050913) 72% 100%);
    box-shadow:0 8px 18px var(--theme-role-shadow-rgba-0-0-0-32-78ad00),inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-06-08e149);
}

.home-promo-song-fallback::after{
    content:"";
    position:absolute;
    left:50%;
    top:47%;
    z-index:2;
    width:32px;
    height:32px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle at 50% 50%,var(--theme-role-surface-edf1ff) 0 2px,var(--theme-role-surface-c6d0ee) 2px 5px,var(--theme-role-surface-5c6c9d) 5px 100%);
    box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-12-895780);
    pointer-events:none;
}

.home-promo-song-fallback > b{
    position:absolute !important;
    left:50% !important;
    top:47% !important;
    right:auto !important;
    bottom:auto !important;
    inset:auto !important;
    z-index:3 !important;
    display:block !important;
    width:auto !important;
    transform:translate(-50%,-50%) !important;
    color:var(--theme-role-text-e6ff45) !important;
    font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif !important;
    font-size:60px !important;
    line-height:1 !important;
    font-style:normal !important;
    font-weight:1000 !important;
    text-shadow:0 0 22px var(--theme-role-shadow-rgba-223-255-0-14-36945f);
}

.home-promo-song-fallback em{
    z-index:5;
}

@media(max-width:720px){
    .home-promo-song-card .home-promo-copy::after{
        top:26px;
        right:14px;
        font-size:104px;
        opacity:.095;
    }

    .home-promo-song-fallback::before{
        width:106px;
        height:106px;
    }

    .home-promo-song-fallback::after{
        width:29px;
        height:29px;
    }

    .home-promo-song-fallback > b{
        font-size:54px !important;
    }
}

@media(max-width:420px){
    .home-promo-song-card .home-promo-copy::after{
        top:28px;
        right:10px;
        font-size:92px;
        opacity:.09;
    }

    .home-promo-song-fallback::before{
        width:94px;
        height:94px;
    }

    .home-promo-song-fallback::after{
        width:27px;
        height:27px;
    }

    .home-promo-song-fallback > b{
        font-size:49px !important;
    }
}


/* ================================================================
   Promo Songs V1.0.1 — watermark note visibility tweak
   Smaller and slightly higher so it remains visible above the CTA.
   ================================================================ */
.home-promo-song-card .home-promo-copy::after{
    top:18px !important;
    right:12px !important;
    font-size:92px !important;
}

@media(max-width:720px){
    .home-promo-song-card .home-promo-copy::after{
        top:18px !important;
        right:10px !important;
        font-size:84px !important;
    }
}

@media(max-width:420px){
    .home-promo-song-card .home-promo-copy::after{
        top:20px !important;
        right:8px !important;
        font-size:76px !important;
    }
}


/* ================================================================
   Homepage promo cards — NEW badge
   Lists published within the last 7 days get a small freshness stamp.
   ================================================================ */
.home-promo-new-badge{
    position:absolute;
    z-index:10;
    left:12px;
    top:12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:0 9px;
    border:1px solid var(--theme-role-border-e7ff00);
    border-radius:5px;
    background:var(--theme-role-surface-rgba-8-11-20-88-72e27f);
    color:var(--theme-role-text-e7ff00);
    font-family:"Arial Narrow","Segoe UI",Arial,sans-serif;
    font-size:9px;
    line-height:1;
    font-style:italic;
    font-weight:1000;
    letter-spacing:.7px;
    text-transform:uppercase;
    box-shadow:0 3px 9px var(--theme-role-shadow-rgba-0-0-0-28-ca0b96);
    pointer-events:none;
}

@media(max-width:720px){
    .home-promo-new-badge{
        left:10px;
        top:10px;
        min-height:22px;
        padding:0 8px;
        font-size:8px;
    }
}