/* =====================================================
FILE: /replay-live/assets/css/replay-live.css
VERSIONE: 3.0
DATA MODIFICA: 15-05-2026
DESCRIZIONE:
- Stile Replay Live Experience
- Home scenografica con logo grande, card Live Experience e mood live music neon / club
- Testi mobile divisi in due metà ingrandite
- File completo R0
===================================================== */

:root{
    --bg:#050008;
    --panel:rgba(9,8,24,.82);
    --panel-strong:rgba(12,10,32,.95);
    --white:#ffffff;
    --muted:#d8c8ff;
    --pink:#ff2fd6;
    --fuchsia:#ff00b8;
    --cyan:#00e5ff;
    --blue:#2457ff;
    --green:#24ff39;
    --gold:#ffe066;
    --shadow-pink:0 0 22px rgba(255,0,184,.72),0 0 52px rgba(255,0,184,.38);
    --shadow-cyan:0 0 18px rgba(0,229,255,.62),0 0 46px rgba(0,229,255,.25);
}

*{box-sizing:border-box}

html,body{
    width:100%;
    min-height:100%;
    margin:0;
    background:var(--bg);
    color:var(--white);
    font-family:'Montserrat',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    overflow-x:hidden;
}

body{
    min-height:100svh;
}

.replay-bg{
    position:fixed;
    inset:0;
    z-index:-4;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,224,102,.18), transparent 18%),
        radial-gradient(circle at 48% 25%, rgba(255,0,184,.44), transparent 25%),
        radial-gradient(circle at 72% 65%, rgba(0,229,255,.24), transparent 27%),
        radial-gradient(circle at 24% 72%, rgba(36,87,255,.28), transparent 28%),
        linear-gradient(180deg,#020008 0%,#090018 48%,#030006 100%);
}

.replay-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(115deg, transparent 0 38%, rgba(255,0,184,.15) 39%, transparent 42% 100%),
        linear-gradient(72deg, transparent 0 53%, rgba(0,229,255,.12) 54%, transparent 56% 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 38px);
    opacity:.62;
}

.replay-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle, rgba(255,255,255,.16) 0 1px, transparent 1.5px),
        linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,.34) 100%);
    background-size:48px 48px, auto;
    opacity:.20;
}

.replay-glow{
    position:fixed;
    z-index:-3;
    border-radius:999px;
    filter:blur(28px);
    opacity:.62;
    pointer-events:none;
}

.replay-glow-a{
    width:76vw;
    height:76vw;
    left:-35vw;
    bottom:-45vw;
    background:rgba(255,0,184,.40);
}

.replay-glow-b{
    width:70vw;
    height:70vw;
    right:-34vw;
    top:-38vw;
    background:rgba(0,229,255,.28);
}

.app-shell{
    width:100%;
    min-height:100svh;
}

.view{
    display:none;
    width:100%;
    min-height:100svh;
}

.view.is-active{
    display:flex;
}

.view-home{
    align-items:center;
    justify-content:center;
    padding:22px;
}

.home-card{
    position:relative;
    width:min(620px, 94vw);
    padding:30px 24px 24px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:34px;
    background:
        linear-gradient(180deg, rgba(28,12,54,.90), rgba(5,4,17,.91)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.12), transparent 36%);
    box-shadow:
        0 28px 90px rgba(0,0,0,.64),
        0 0 64px rgba(255,0,184,.26),
        inset 0 0 34px rgba(0,229,255,.06);
    text-align:center;
    backdrop-filter:blur(14px);
    overflow:hidden;
}

.home-card::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:28px;
    border:1px solid rgba(0,229,255,.18);
    pointer-events:none;
    box-shadow:inset 0 0 28px rgba(255,0,184,.08);
}

.home-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    right:-52px;
    top:-56px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,229,255,.32), transparent 66%);
    filter:blur(2px);
    opacity:.88;
    pointer-events:none;
}

.replay-logo{
    position:relative;
    z-index:1;
    display:block;
    width:min(390px, 82vw);
    margin:0 auto 18px;
    border-radius:26px;
    box-shadow:
        0 0 30px rgba(255,0,184,.52),
        0 0 58px rgba(0,229,255,.28),
        0 20px 44px rgba(0,0,0,.45);
    transform:translateZ(0);
}

.experience-card{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:0 auto 13px;
    padding:9px 17px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.24);
    background:linear-gradient(90deg, rgba(255,0,184,.34), rgba(0,229,255,.22));
    box-shadow:0 0 24px rgba(255,0,184,.26), inset 0 0 18px rgba(255,255,255,.06);
    font-family:'Orbitron',sans-serif;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:#fff;
    text-shadow:var(--shadow-cyan);
    font-weight:900;
    font-size:.78rem;
}

.experience-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px rgba(36,255,57,.95),0 0 24px rgba(36,255,57,.45);
}

.home-kicker,
.lyrics-kicker{
    font-family:'Orbitron',sans-serif;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:var(--cyan);
    text-shadow:var(--shadow-cyan);
    font-weight:800;
}

.home-kicker{
    font-size:.78rem;
    margin-top:4px;
}

.home-card h1{
    position:relative;
    z-index:1;
    margin:6px 0 8px;
    font-family:'Orbitron',sans-serif;
    font-size:clamp(2.25rem, 8vw, 4rem);
    line-height:.96;
    text-transform:uppercase;
    color:#fff;
    text-shadow:
        0 0 12px rgba(255,255,255,.54),
        0 0 24px rgba(255,0,184,.88),
        0 0 62px rgba(255,0,184,.48);
}

.home-subtitle{
    position:relative;
    z-index:1;
    margin:0 auto 14px;
    max-width:440px;
    color:#f0eaff;
    font-size:1.16rem;
    line-height:1.35;
    font-weight:800;
    text-shadow:0 0 18px rgba(0,229,255,.22);
}

.home-neon-line{
    position:relative;
    z-index:1;
    width:min(330px, 70vw);
    height:2px;
    margin:16px auto 17px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, var(--pink), var(--cyan), transparent);
    box-shadow:0 0 18px rgba(255,0,184,.64),0 0 24px rgba(0,229,255,.42);
}

.status-card{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:13px;
    width:100%;
    margin-top:0;
    padding:16px 17px;
    border-radius:22px;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(0,229,255,.34);
    text-align:left;
    box-shadow:inset 0 0 24px rgba(0,229,255,.09),0 0 28px rgba(0,229,255,.16);
}

.status-dot{
    flex:0 0 16px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ffb300;
    box-shadow:0 0 12px rgba(255,179,0,.8);
}

.status-dot.is-online{
    background:var(--green);
    box-shadow:0 0 14px rgba(36,255,57,.95),0 0 28px rgba(36,255,57,.48);
}

.status-label{
    font-family:'Orbitron',sans-serif;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:rgba(255,255,255,.72);
    font-size:.72rem;
    font-weight:800;
}

.status-message{
    margin-top:4px;
    font-size:1.1rem;
    font-weight:900;
    color:#fff;
}

.view-lyrics{
    flex-direction:column;
    padding:12px;
}

.lyrics-header{
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    padding:10px 12px;
    margin-bottom:10px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(4,3,13,.88);
    box-shadow:0 0 26px rgba(255,0,184,.18);
    backdrop-filter:blur(12px);
}

.lyrics-logo{
    flex:0 0 72px;
    width:72px;
    height:48px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 0 16px rgba(255,0,184,.46);
}

.lyrics-kicker{
    font-size:.72rem;
}

.lyrics-message{
    margin-top:3px;
    font-size:.96rem;
    font-weight:800;
    color:#fff;
}

.lyrics-desktop{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    padding:8px 0 24px;
}

.lyrics-desktop img{
    display:block;
    max-width:min(1200px, 96vw);
    max-height:calc(100svh - 104px);
    width:auto;
    height:auto;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 22px 70px rgba(0,0,0,.62),0 0 34px rgba(0,229,255,.18);
    background:#111;
}

.lyrics-mobile{
    display:none;
    width:100%;
    gap:14px;
    padding-bottom:24px;
}

.lyrics-half-card{
    width:100%;
    border-radius:18px;
    padding:8px;
    background:rgba(0,0,0,.34);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 0 24px rgba(255,0,184,.16);
}

.half-label{
    display:inline-flex;
    align-items:center;
    margin:0 0 7px 2px;
    padding:5px 10px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,0,184,.32), rgba(0,229,255,.20));
    font-family:'Orbitron',sans-serif;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#fff;
}

.image-half{
    position:relative;
    width:100%;
    overflow:hidden;
    border-radius:14px;
    background:#050505;
    border:1px solid rgba(255,255,255,.16);
}

.image-half img{
    display:block;
    width:200%;
    max-width:none;
    height:auto;
}

.image-half-right img{
    transform:translateX(-50%);
}

@media (max-width: 767px){
    .view-home{
        padding:14px;
    }

    .home-card{
        width:min(430px, 94vw);
        padding:21px 15px 16px;
        border-radius:28px;
    }

    .home-card::before{
        inset:8px;
        border-radius:22px;
    }

    .replay-logo{
        width:min(315px, 82vw);
        margin-bottom:14px;
        border-radius:22px;
    }

    .experience-card{
        padding:8px 13px;
        font-size:.66rem;
        letter-spacing:.12em;
        margin-bottom:11px;
    }

    .home-card h1{
        font-size:clamp(1.86rem, 9.5vw, 2.72rem);
        margin:5px 0 8px;
    }

    .home-subtitle{
        font-size:1rem;
        margin-bottom:12px;
    }

    .home-neon-line{
        margin:13px auto 14px;
    }

    .status-card{
        padding:13px;
        border-radius:18px;
    }

    .status-label{
        font-size:.66rem;
    }

    .status-message{
        font-size:1rem;
    }

    .view-lyrics{
        padding:8px;
    }

    .lyrics-header{
        padding:8px;
        border-radius:16px;
        margin-bottom:8px;
    }

    .lyrics-logo{
        flex-basis:58px;
        width:58px;
        height:40px;
    }

    .lyrics-kicker{
        font-size:.64rem;
    }

    .lyrics-message{
        font-size:.88rem;
    }

    .lyrics-desktop{
        display:none;
    }

    .lyrics-mobile{
        display:flex;
        flex-direction:column;
    }
}

@media (orientation: landscape) and (max-width: 920px){
    .view-home{
        padding:12px;
    }

    .home-card{
        width:min(840px, 96vw);
        display:grid;
        grid-template-columns:270px 1fr;
        gap:18px;
        align-items:center;
        text-align:left;
        padding:16px;
    }

    .home-card::before,
    .home-card::after{
        display:none;
    }

    .replay-logo{
        width:270px;
        margin:0;
    }

    .experience-card{
        margin:0 0 10px;
    }

    .home-neon-line{
        margin:12px 0 13px;
    }

    .status-card{
        margin-top:0;
    }
}