*{
    box-sizing:border-box;
}

:root{
    color-scheme:dark;
}

html{
    background:#02050d;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(
            circle at 20% 0%,
            #17346f 0,
            #071333 25%,
            #02050d 60%
        );
    color:#fff;
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

.topbar{
    position:sticky;
    top:0;
    z-index:100;
    min-height:78px;
    padding:
        8px
        clamp(16px,4vw,54px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:
        rgba(3,8,22,.94);
    border-bottom:
        1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-logo{
    width:48px;
    height:54px;
    object-fit:contain;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-text strong{
    font-size:
        clamp(15px,2vw,20px);
    letter-spacing:.4px;
}

.brand-text span{
    margin-top:5px;
    color:#8fb0ff;
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
}

.live-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:12px 17px;
    border-radius:999px;
    background:#e50914;
    color:#fff;
    text-decoration:none;
    font-weight:900;
    white-space:nowrap;
    box-shadow:
        0 8px 30px rgba(229,9,20,.28);
}

.live-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#fff;
    box-shadow:
        0 0 0 5px rgba(255,255,255,.18);
}

.hero{
    min-height:300px;
    padding:
        clamp(50px,8vw,100px)
        clamp(18px,6vw,80px);
    display:flex;
    align-items:center;
    background:
        linear-gradient(
            90deg,
            rgba(3,8,22,.10),
            rgba(3,8,22,.82)
        );
}

.hero-content{
    max-width:760px;
}

.hero-label{
    display:inline-block;
    margin-bottom:12px;
    color:#8fb0ff;
    font-size:13px;
    font-weight:900;
    letter-spacing:2px;
}

.hero h1{
    margin:0;
    font-size:
        clamp(38px,7vw,76px);
    line-height:.98;
    letter-spacing:-2px;
}

.hero p{
    max-width:650px;
    margin:20px 0 0;
    color:#c7d2ec;
    font-size:
        clamp(16px,2vw,21px);
    line-height:1.5;
}

.catalog-section{
    max-width:1600px;
    margin:auto;
    padding:
        30px
        clamp(16px,4vw,54px)
        60px;
}

.catalog-header{
    margin-bottom:26px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
}

.catalog-header h2{
    margin:0;
    font-size:
        clamp(26px,4vw,38px);
}

.catalog-header p{
    margin:7px 0 0;
    color:#8fa1c7;
}

.search-box{
    width:min(360px,100%);
    height:46px;
    padding:0 14px;
    display:flex;
    align-items:center;
    gap:8px;
    border:
        1px solid rgba(255,255,255,.15);
    border-radius:14px;
    background:
        rgba(255,255,255,.07);
}

.search-box span{
    color:#8fa1c7;
    font-size:25px;
}

.search-box input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#fff;
    font-size:15px;
}

.search-box input::placeholder{
    color:#8491ae;
}

.grid{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(270px,1fr)
        );
    gap:22px;
}

.card{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:
        1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:#071126;
    box-shadow:
        0 15px 35px rgba(0,0,0,.28);
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.card.available{
    cursor:pointer;
}

.card.available:hover,
.card.available:focus-within{
    transform:translateY(-5px);
    border-color:
        rgba(93,142,255,.8);
    box-shadow:
        0 20px 45px rgba(0,0,0,.42),
        0 0 0 1px rgba(60,110,255,.15);
}

.card-image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#02050d;
}

.card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:
        transform .35s ease;
}

.card.available:hover
.card-image img{
    transform:scale(1.035);
}

.card-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(2,5,13,.80)
        );
}

.play{
    position:absolute;
    z-index:2;
    left:16px;
    bottom:14px;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0b5cff;
    box-shadow:
        0 8px 22px rgba(11,92,255,.45);
    font-size:19px;
}

.card-body{
    min-height:112px;
    padding:15px 17px 17px;
}

.card-title{
    margin:0;
    color:#fff;
    font-size:18px;
    line-height:1.2;
}

.card-meta{
    margin-top:9px;
    color:#8fb0ff;
    font-size:13px;
    font-weight:900;
}

.card-link{
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:18px;
}

.card-link:focus{
    outline:
        3px solid #fff;
    outline-offset:-4px;
}

.coming{
    position:absolute;
    z-index:3;
    top:12px;
    right:12px;
    padding:7px 10px;
    border-radius:999px;
    background:
        rgba(3,8,22,.90);
    color:#c9d4ec;
    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;
}

.card.disabled{
    opacity:.68;
}

.status-box{
    padding:35px;
    text-align:center;
    border:
        1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:
        rgba(255,255,255,.05);
    color:#aab7d3;
}

.status-box.error{
    color:#ffd0d0;
}

footer{
    min-height:90px;
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-top:
        1px solid rgba(255,255,255,.08);
    color:#8290ad;
    background:#02050d;
}

footer img{
    width:34px;
    height:40px;
    object-fit:contain;
}

@media(max-width:700px){

    .topbar{
        min-height:68px;
    }

    .brand-logo{
        width:38px;
        height:44px;
    }

    .brand-text strong{
        font-size:13px;
    }

    .brand-text span{
        font-size:9px;
    }

    .live-button{
        padding:10px 12px;
        font-size:12px;
    }

    .hero{
        min-height:240px;
    }

    .catalog-header{
        align-items:stretch;
        flex-direction:column;
    }

    .search-box{
        width:100%;
    }

    .grid{
        grid-template-columns:
            repeat(
                auto-fill,
                minmax(155px,1fr)
            );
        gap:13px;
    }

    .card{
        border-radius:13px;
    }

    .card-body{
        min-height:90px;
        padding:11px 12px 13px;
    }

    .card-title{
        font-size:14px;
    }

    .card-meta{
        font-size:11px;
    }

    .play{
        width:34px;
        height:34px;
        left:10px;
        bottom:9px;
        font-size:14px;
    }

    .coming{
        top:7px;
        right:7px;
        padding:5px 7px;
        font-size:8px;
    }
}

/* =========================================================
   FASE 15D-002 - HOME PWA COORDINATA AL PLAYER
   ========================================================= */

/* Testata */

.topbar{
    background:
        linear-gradient(
            180deg,
            rgba(8,25,57,.97),
            rgba(3,12,31,.98)
        );
    border-bottom:
        1px solid rgba(74,143,255,.30);
    box-shadow:
        0 8px 26px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.brand-logo{
    filter:
        drop-shadow(
            0 4px 10px
            rgba(38,113,255,.28)
        );
}

.brand-text strong{
    text-shadow:
        0 2px 8px rgba(0,0,0,.40);
}

.brand-text span{
    color:#79adff;
}

/* LIVE resta rosso e ben distinguibile */

.live-button{
    border:
        1px solid rgba(255,105,112,.68);
    background:
        linear-gradient(
            145deg,
            #f21b27,
            #b80710
        );
    box-shadow:
        0 9px 24px rgba(229,9,20,.30),
        inset 0 1px 0 rgba(255,255,255,.24);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.live-button:hover{
    transform:translateY(-1px);
    box-shadow:
        0 12px 30px rgba(229,9,20,.40),
        0 0 18px rgba(229,9,20,.18),
        inset 0 1px 0 rgba(255,255,255,.28);
}

/* Hero */

.hero{
    position:relative;
    overflow:hidden;
    min-height:280px;
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(32,91,197,.32),
            transparent 38%
        ),
        linear-gradient(
            125deg,
            rgba(10,31,72,.98),
            rgba(3,11,29,.98) 62%,
            rgba(2,7,18,.99)
        );
    border-bottom:
        1px solid rgba(72,137,255,.18);
    box-shadow:
        inset 0 -20px 45px
        rgba(0,0,0,.18);
}

.hero::before{
    content:"";
    position:absolute;
    pointer-events:none;
    top:0;
    bottom:0;
    left:0;
    width:5px;
    background:
        linear-gradient(
            180deg,
            transparent,
            #4c9cff,
            transparent
        );
    box-shadow:
        0 0 18px rgba(60,139,255,.55);
}

.hero-content{
    position:relative;
    z-index:1;
}

.hero-label{
    color:#73aaff;
    text-shadow:
        0 0 14px rgba(59,132,255,.40);
}

.hero h1{
    text-shadow:
        0 4px 18px rgba(0,0,0,.42);
}

.hero p{
    color:#cbd8f3;
}

/* Catalogo */

.catalog-section{
    position:relative;
}

.catalog-header{
    padding-bottom:16px;
    border-bottom:
        1px solid rgba(86,145,255,.17);
}

.catalog-header h2{
    text-shadow:
        0 2px 10px rgba(0,0,0,.34);
}

.catalog-header p{
    color:#91a9d7;
}

/* Ricerca */

.search-box{
    border:
        1px solid rgba(91,157,255,.46);
    background:
        linear-gradient(
            145deg,
            rgba(17,46,101,.72),
            rgba(6,21,53,.84)
        );
    box-shadow:
        0 8px 22px rgba(0,0,0,.24),
        0 0 14px rgba(40,112,255,.08),
        inset 0 1px 0 rgba(255,255,255,.08);
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.search-box:focus-within{
    border-color:
        rgba(105,176,255,.95);
    box-shadow:
        0 10px 26px rgba(0,0,0,.28),
        0 0 20px rgba(48,129,255,.20),
        inset 0 1px 0 rgba(255,255,255,.10);
}

/* Card rubriche */

.card{
    border:
        2px solid rgba(78,143,239,.42);
    border-radius:18px;
    background:
        linear-gradient(
            145deg,
            rgba(15,37,83,.98),
            rgba(5,16,40,.99)
        );
    box-shadow:
        0 15px 34px rgba(0,0,0,.36),
        0 0 12px rgba(37,116,255,.08),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.card.available:hover,
.card.available:focus-within{
    transform:
        translateY(-5px)
        scale(1.012);
    border-color:
        rgba(91,168,255,.98);
    box-shadow:
        0 22px 44px rgba(0,0,0,.46),
        0 0 22px rgba(45,126,255,.28),
        inset 0 1px 0 rgba(255,255,255,.12);
}

/* Immagine rubrica */

.card-image{
    border-bottom:
        1px solid rgba(91,151,255,.20);
}

.card-image::before{
    content:"";
    position:absolute;
    z-index:2;
    pointer-events:none;
    top:0;
    left:10%;
    right:10%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(158,207,255,.70),
            transparent
        );
}

.card-image::after{
    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(3,10,27,.92)
        );
}

/* Pulsante PLAY */

.play{
    border:
        1px solid rgba(151,202,255,.80);
    background:
        linear-gradient(
            145deg,
            #2382ff,
            #0750d8
        );
    box-shadow:
        0 8px 22px rgba(11,92,255,.48),
        0 0 16px rgba(50,137,255,.24),
        inset 0 1px 0 rgba(255,255,255,.28);
}

/* Testi card */

.card-body{
    background:
        linear-gradient(
            180deg,
            rgba(12,32,73,.90),
            rgba(5,17,42,.98)
        );
}

.card-title{
    font-weight:900;
    text-shadow:
        0 2px 5px rgba(0,0,0,.30);
}

.card-meta{
    color:#7eb0ff;
}

/* Card non ancora disponibili */

.card.disabled{
    opacity:.62;
    border-color:
        rgba(115,135,180,.24);
    box-shadow:
        0 12px 28px rgba(0,0,0,.24);
}

.coming{
    border:
        1px solid rgba(147,170,220,.24);
    background:
        rgba(3,10,27,.92);
}

/* Stato caricamento/errori */

.status-box{
    border:
        1px solid rgba(83,150,255,.28);
    background:
        linear-gradient(
            145deg,
            rgba(14,37,83,.70),
            rgba(5,17,42,.82)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05);
}

/* Footer */

footer{
    border-top:
        1px solid rgba(73,136,255,.18);
    background:
        linear-gradient(
            180deg,
            #030b1c,
            #02050d
        );
}

/* Mobile: nessun ingrandimento delle card al tocco */

@media(max-width:700px){

    .hero{
        min-height:230px;
    }

    .card.available:hover,
    .card.available:focus-within{
        transform:none;
    }

    .card{
        border-width:1px;
    }
}


/* FASE 15D-003 - hero home più compatto */
@media(min-width:701px){

    .hero{
        min-height:210px;
        padding-top:38px;
        padding-bottom:38px;
    }

    .hero-content{
        padding-top:0;
        padding-bottom:0;
    }

    .hero-label{
        margin-bottom:12px;
    }

    .hero h1{
        margin-top:0;
        margin-bottom:14px;
        font-size:clamp(42px,4.4vw,62px);
        line-height:1.02;
    }

    .hero p{
        margin-top:0;
        margin-bottom:0;
        max-width:720px;
        font-size:19px;
        line-height:1.55;
    }
}


/* =========================================================
   FASE 15D-004 - RUBRICHE PIU' INVITANTI
   ========================================================= */

@media(min-width:701px){

    .cards-grid{
        gap:22px;
    }

    .card{
        position:relative;
        overflow:hidden;
        border:
            2px solid rgba(73,143,244,.52);
        border-radius:19px;
        background:#061738;
        box-shadow:
            0 14px 30px rgba(0,0,0,.36),
            0 0 0 1px rgba(255,255,255,.025),
            inset 0 1px 0 rgba(255,255,255,.08);
        transition:
            transform .22s ease,
            border-color .22s ease,
            box-shadow .22s ease;
    }

    .card.available{
        cursor:pointer;
    }

    .card.available:hover,
    .card.available:focus-within{
        transform:
            translateY(-7px)
            scale(1.025);
        z-index:5;
        border-color:#65a8ff;
        box-shadow:
            0 24px 46px rgba(0,0,0,.52),
            0 0 0 1px rgba(119,184,255,.28),
            0 0 28px rgba(40,126,255,.36),
            inset 0 1px 0 rgba(255,255,255,.15);
    }

    /* Immagine protagonista */

    .card-image{
        position:relative;
        overflow:hidden;
    }

    .card-image img{
        transition:
            transform .40s ease,
            filter .30s ease;
    }

    .card.available:hover
    .card-image img{
        transform:scale(1.065);
        filter:
            brightness(1.08)
            saturate(1.08);
    }

    .card-image::after{
        content:"";
        position:absolute;
        z-index:1;
        pointer-events:none;
        inset:0;
        background:
            linear-gradient(
                180deg,
                transparent 38%,
                rgba(3,11,29,.16) 57%,
                rgba(3,11,29,.94) 100%
            );
    }

    /* Pulsante play */

    .play{
        z-index:4;
        width:48px;
        height:48px;
        border:
            2px solid rgba(255,255,255,.82);
        box-shadow:
            0 9px 24px rgba(0,67,220,.55),
            0 0 18px rgba(68,155,255,.40),
            inset 0 1px 0 rgba(255,255,255,.35);
        transition:
            transform .20s ease,
            box-shadow .20s ease;
    }

    .card.available:hover .play{
        transform:scale(1.13);
        box-shadow:
            0 12px 28px rgba(0,67,220,.62),
            0 0 25px rgba(72,162,255,.58),
            inset 0 1px 0 rgba(255,255,255,.42);
    }

    /* Corpo della card */

    .card-body{
        position:relative;
        z-index:3;
        padding:
            14px
            16px
            15px;
        background:
            linear-gradient(
                145deg,
                rgba(13,45,103,.98),
                rgba(5,21,54,.99)
            );
        border-top:
            1px solid rgba(91,157,255,.18);
    }

    .card-title{
        margin-bottom:7px;
        color:#fff;
        font-size:18px;
        line-height:1.15;
        font-weight:900;
        text-shadow:
            0 2px 7px rgba(0,0,0,.38);
    }

    .card-meta{
        display:flex;
        align-items:center;
        gap:7px;
        color:#8db9ff;
        font-size:13px;
        font-weight:800;
    }

    .card-meta::before{
        content:"▶";
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:18px;
        height:18px;
        border-radius:50%;
        background:
            rgba(57,133,255,.18);
        color:#78b0ff;
        font-size:8px;
    }

    /* Indicazione Guarda Ora */

    .card.available .card-body::after{
        content:"GUARDA ORA";
        position:absolute;
        right:14px;
        bottom:16px;
        color:#72aaff;
        font-size:9px;
        line-height:1;
        font-weight:900;
        letter-spacing:.11em;
        opacity:.72;
        transition:
            color .18s ease,
            opacity .18s ease;
    }

    .card.available:hover
    .card-body::after{
        color:#fff;
        opacity:1;
        text-shadow:
            0 0 10px
            rgba(76,155,255,.70);
    }
}


/* =========================================================
   FASE 15D-007 - SISTEMA AUTOMATICO NOVITA
   ========================================================= */

.news-notice{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    margin:
        18px
        0
        22px;
    padding:
        15px
        18px;
    overflow:hidden;
    border:
        2px solid
        rgba(76,158,255,.78);
    border-radius:16px;
    background:
        linear-gradient(
            135deg,
            rgba(18,72,166,.96),
            rgba(7,31,79,.98)
        );
    box-shadow:
        0 14px 30px rgba(0,0,0,.30),
        0 0 22px rgba(42,126,255,.20),
        inset 0 1px 0 rgba(255,255,255,.13);
}

.news-notice::before{
    content:"";
    position:absolute;
    pointer-events:none;
    top:0;
    left:8%;
    right:8%;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(176,218,255,.95),
            transparent
        );
    box-shadow:
        0 0 12px
        rgba(75,161,255,.72);
}

.news-notice-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:
        1px solid
        rgba(255,255,255,.65);
    border-radius:12px;
    background:
        linear-gradient(
            145deg,
            #2980ff,
            #1356c8
        );
    color:#fff;
    font-size:20px;
    box-shadow:
        0 7px 18px
        rgba(0,66,205,.45);
}

.news-notice-text{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.news-notice-text strong{
    color:#fff;
    font-size:15px;
    font-weight:900;
    letter-spacing:.06em;
}

.news-notice-text span{
    color:#b8d1ff;
    font-size:13px;
    font-weight:700;
}

.news-notice-badge{
    flex:0 0 auto;
    min-width:42px;
    height:32px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#fff;
    color:#1267e8;
    font-size:15px;
    font-weight:900;
    box-shadow:
        0 5px 15px
        rgba(0,0,0,.22);
}

/* Badge sulla rubrica aggiornata */

.card.has-news{
    border-color:
        rgba(96,176,255,.95);
    box-shadow:
        0 16px 34px rgba(0,0,0,.40),
        0 0 24px rgba(48,137,255,.25),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.card-news-badge{
    position:absolute;
    z-index:8;
    top:11px;
    right:11px;
    padding:
        7px
        10px;
    border:
        1px solid
        rgba(255,255,255,.72);
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            #ff334f,
            #d70c2d
        );
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.055em;
    box-shadow:
        0 7px 18px
        rgba(185,0,36,.40),
        0 0 14px
        rgba(255,45,78,.22);
}

@media(max-width:700px){

    .news-notice{
        margin:
            14px
            0
            18px;
        padding:
            12px;
        gap:10px;
    }

    .news-notice-icon{
        flex-basis:36px;
        width:36px;
        height:36px;
        font-size:17px;
    }

    .news-notice-text strong{
        font-size:12px;
    }

    .news-notice-text span{
        font-size:11px;
    }

    .news-notice-badge{
        min-width:34px;
        height:28px;
        font-size:13px;
    }

    .card-news-badge{
        top:8px;
        right:8px;
        padding:
            6px
            8px;
        font-size:9px;
    }
}