/* ==========================================================
   BASE
========================================================== */

#usamiSummerChallenge,
#usamiSummerChallenge *{

    box-sizing:border-box;

}


#usamiSummerChallenge{

    position:relative;

    z-index:1;

    margin:32px 0;

    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

}


/* ==========================================================
   ANIMAZIONI
========================================================== */

@keyframes usamiCTA{

    0%,
    100%{

        transform:scale(1);

        box-shadow:
            0 8px 20px
            rgba(220,38,38,.26);

    }

    50%{

        transform:scale(1.026);

        box-shadow:
            0 12px 31px
            rgba(220,38,38,.52);

    }

}


@keyframes usamiArrowMove{

    0%,
    100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(4px);

    }

}


@keyframes usamiStreakPop{

    0%{

        opacity:0;

        transform:
            translateY(5px)
            scale(.94);

    }

    65%{

        transform:
            translateY(0)
            scale(1.04);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes usamiNewRecord{

    0%,
    100%{

        transform:rotate(0);

    }

    25%{

        transform:rotate(-2deg);

    }

    75%{

        transform:rotate(2deg);

    }

}


@media(
    prefers-reduced-motion:
    reduce
){

    #usamiSummerChallenge *{

        animation:none !important;

        transition:none !important;

    }

}


/* ==========================================================
   LAUNCHER
========================================================== */

#usqLauncher{

    width:100%;

    max-width:640px;

    margin:0 auto;

    padding:16px 18px;

    position:relative;

    overflow:hidden;

    cursor:pointer;

    border:
        1px solid #dce5ec;

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f3f7fa 100%
        );

    box-shadow:
        0 20px 52px
        rgba(15,23,42,.23);

}


#usqLauncher:before{

    content:"";

    position:absolute;

    top:-60px;

    right:-60px;

    width:170px;

    height:170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(220,38,38,.12),
            rgba(220,38,38,0)
        );

    pointer-events:none;

}


.usq-launch{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    gap:11px;

}


.usq-logo{

    width:54px;

    height:54px;

    min-width:54px;

    object-fit:cover;

    border-radius:50%;

    box-shadow:
        0 5px 14px
        rgba(15,23,42,.14);

}


.usq-launch-label{

    color:#c51f2c;

    font-size:9px;

    line-height:1.2;

    font-weight:900;

    letter-spacing:.7px;

}


.usq-launch-title{

    margin-top:2px;

    color:#172f49;

    font-size:17px;

    line-height:1.12;

    font-weight:950;

}


.usq-launch-copy{

    margin-top:3px;

    color:#64748b;

    font-size:10.5px;

    line-height:1.35;

}


.usq-launch-record{

    display:inline-flex;

    align-items:center;

    gap:4px;

    margin-top:5px;

    padding:3px 7px;

    border-radius:999px;

    background:#fff0f1;

    color:#b91c2a;

    font-size:8px;

    font-weight:900;

}


.usq-arrow{

    width:36px;

    height:36px;

    min-width:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #f0353e
        );

    font-weight:900;

    animation:
        usamiArrowMove
        1.2s infinite;

}



/* ==========================================================
   PANEL
   ALTEZZA DINAMICA
========================================================== */

#usqPanel{

    display:none;

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    z-index:1000000;

    width:430px;

    max-width:
        calc(100vw - 28px);

    height:auto;

    max-height:
        calc(100vh - 26px);

    overflow:auto;

    overscroll-behavior:
        contain;

    border:
        1px solid #dce5ec;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 28px 72px
        rgba(15,23,42,.32);

}



/* ==========================================================
   HEADER
========================================================== */

.usq-header{

    position:relative;

    padding:
        15px 18px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #142a43,
            #214b6e
        );

}


.usq-header-inner{

    display:flex;

    align-items:center;

    gap:10px;

}


.usq-header-logo{

    width:44px;

    height:44px;

    object-fit:cover;

    border-radius:50%;

    border:
        2px solid
        rgba(255,255,255,.76);

}


.usq-header-label{

    color:#ffc5ca;

    font-size:9px;

    font-weight:900;

    letter-spacing:.7px;

}


.usq-header-title{

    margin-top:2px;

    font-size:19px;

    line-height:1.1;

    font-weight:950;

}


#usqClose{

    position:absolute;

    top:13px;

    right:13px;

    width:33px;

    height:33px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        rgba(255,255,255,.13);

    color:#fff;

    cursor:pointer;

    font-size:18px;

    font-weight:900;

}



/* ==========================================================
   INTRO
========================================================== */

#usqIntro{

    padding:
        31px 23px 27px;

    text-align:center;

}


.usq-summer-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:
        0 auto 12px;

    border-radius:50%;

    background:#fff2dc;

    font-size:36px;

}


.usq-chip{

    display:inline-block;

    padding:
        5px 11px;

    border-radius:999px;

    background:#fff0f1;

    color:#c92330;

    font-size:8.5px;

    font-weight:900;

    letter-spacing:.7px;

}


.usq-intro-title{

    margin-top:10px;

    color:#172f49;

    font-size:25px;

    line-height:1.08;

    font-weight:950;

    letter-spacing:-.6px;

}


.usq-intro-copy{

    max-width:330px;

    margin:
        11px auto 18px;

    color:#64748b;

    font-size:11.5px;

    line-height:1.5;

}


.usq-start{

    width:100%;

    min-height:49px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:13px;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef3039
        );

    color:#fff;

    cursor:pointer;

    font-size:11px;

    font-weight:950;

    box-shadow:
        0 8px 20px
        rgba(220,38,38,.25);

}



/* ==========================================================
   GAME
========================================================== */

#usqGame{

    display:none;

    padding:
        12px 14px 15px;

}


.usq-stats{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:7px;

    margin-bottom:8px;

}


.usq-stat{

    padding:
        7px 5px;

    text-align:center;

    border:
        1px solid #e2e8f0;

    border-radius:11px;

    background:#f8fafc;

}


.usq-stat-label{

    color:#94a3b8;

    font-size:7.5px;

    font-weight:850;

    text-transform:uppercase;

}


.usq-stat-value{

    margin-top:1px;

    color:#172f49;

    font-size:18px;

    font-weight:950;

}


.usq-progress{

    height:5px;

    overflow:hidden;

    border-radius:999px;

    background:#e9eef2;

}


#usqProgress{

    width:6.67%;

    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #c91e2b,
            #ef3945
        );

    transition:
        width .25s ease;

}


.usq-game-tools{

    min-height:23px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    margin:
        6px 0 8px;

}


#usqStreakMini{

    color:#e26412;

    font-size:8.5px;

    font-weight:900;

}


#usqRestart{

    margin-left:auto;

    color:#8996a4;

    font-size:8.5px;

    font-weight:800;

    cursor:pointer;

}


#usqPhrase{

    margin-bottom:9px;

    padding:7px 9px;

    border-left:
        3px solid #dc2626;

    border-radius:
        0 9px 9px 0;

    background:#f8fafc;

    color:#64748b;

    font-size:10px;

    line-height:1.35;

    text-align:center;

}


.usq-category-wrap{

    text-align:center;

}


#usqCategory{

    display:inline-block;

    margin-bottom:8px;

    padding:4px 9px;

    border-radius:999px;

    background:#fff0f1;

    color:#c92330;

    font-size:8px;

    font-weight:900;

    letter-spacing:.5px;

}


#usqQuestion{

    margin-bottom:13px;

    color:#172f49;

    font-size:15.5px;

    font-weight:850;

    line-height:1.38;

    text-align:center;

}


#usqAnswers{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:8px;

}


.usq-answer{

    min-height:49px;

    padding:
        10px 8px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid #dce4ea;

    border-radius:11px;

    background:#fff;

    color:#334155;

    cursor:pointer;

    font-size:10.5px;

    font-weight:750;

    line-height:1.25;

    text-align:center;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease;

}


.usq-answer:hover{

    border-color:#aebdca;

    transform:
        translateY(-1px);

}


#usqStreakToast{

    display:none;

    margin-top:9px;

    padding:
        7px 10px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #fff3df,
            #fff8ec
        );

    border:
        1px solid #f4d39e;

    color:#bd5b0a;

    font-size:10px;

    font-weight:900;

    text-align:center;

    animation:
        usamiStreakPop
        .3s ease both;

}


#usqFeedback{

    display:none;

    margin-top:9px;

    padding:
        9px 10px;

    border-radius:10px;

    background:#f4f7f9;

    color:#607183;

    font-size:10px;

    line-height:1.45;

}


.usq-didyouknow{

    margin-top:8px;

    padding-top:8px;

    border-top:
        1px solid #dfe6eb;

    color:#3d5266;

}


.usq-didyouknow strong{

    color:#b51e2a;

    font-size:8px;

    letter-spacing:.5px;

}


#usqActions{

    display:none;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-top:11px;

}


#usqArticle{

    color:#b51e2a;

    font-size:9.5px;

    font-weight:850;

    text-decoration:underline;

}


#usqNext{

    padding:
        9px 15px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #c51e2b,
            #e42e39
        );

    color:#fff;

    cursor:pointer;

    font-size:9.5px;

    font-weight:900;

}



/* ==========================================================
   CHECKPOINT
========================================================== */

#usqMidCTA{

    display:none;

    padding:18px;

}


.usq-mid-card{

    padding:
        20px 17px;

    border-radius:18px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #142b45,
            #214a6c
        );

}


.usq-mid-label{

    color:#ffc6cb;

    font-size:9px;

    font-weight:900;

    letter-spacing:.6px;

}


.usq-mid-title{

    margin-top:5px;

    font-size:20px;

    line-height:1.2;

    font-weight:950;

}


.usq-check-score{

    margin:
        12px 0 5px;

    display:flex;

    align-items:flex-end;

    gap:7px;

}


#usqCheckpointScore{

    color:#fff;

    font-size:39px;

    line-height:1;

    font-weight:950;

}


.usq-check-label{

    padding-bottom:4px;

    color:
        rgba(255,255,255,.64);

    font-size:9px;

}


#usqCheckpointText{

    margin-bottom:15px;

    color:
        rgba(255,255,255,.78);

    font-size:10.5px;

    line-height:1.45;

}


/*
 CONTINUA È IL PRIMO
 E IL PIÙ EVIDENTE
*/

#usqContinue{

    width:100%;

    min-height:55px;

    padding:13px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:#fff;

    color:#172f49;

    cursor:pointer;

    font-size:11px;

    font-weight:950;

    box-shadow:
        0 7px 17px
        rgba(0,0,0,.13);

}


.usq-mid-separator{

    margin:
        15px 0 10px;

    display:flex;

    align-items:center;

    gap:8px;

    color:
        rgba(255,255,255,.46);

    font-size:8px;

}


.usq-mid-separator:before,
.usq-mid-separator:after{

    content:"";

    height:1px;

    flex:1;

    background:
        rgba(255,255,255,.15);

}


.usq-mid-cta-title{

    margin-bottom:10px;

    color:#fff;

    font-size:15px;

    line-height:1.3;

    font-weight:900;

    text-align:center;

}



/* ==========================================================
   CTA PULSANTE
========================================================== */

.usq-cta{

    width:100%;

    min-height:56px;

    padding:
        14px 12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #ef252d,
            #d71920
        );

    color:#fff !important;

    text-decoration:none !important;

    font-size:11.5px;

    font-weight:950;

    letter-spacing:.2px;

    animation:
        usamiCTA
        1.55s infinite;

}



/* ==========================================================
   RISULTATO
========================================================== */

#usqResult{

    display:none;

    padding:
        21px 17px 19px;

    text-align:center;

}


#usqResultEmoji{

    width:60px;

    height:60px;

    margin:
        0 auto 8px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff0f1;

    font-size:30px;

}


#usqNewRecord{

    display:none;

    width:max-content;

    max-width:100%;

    margin:
        0 auto 7px;

    padding:
        5px 9px;

    border-radius:999px;

    background:#fff2d8;

    color:#b76500;

    font-size:8.5px;

    font-weight:950;

    letter-spacing:.4px;

    animation:
        usamiNewRecord
        .5s ease;

}


#usqResultTitle{

    color:#172f49;

    font-size:20px;

    font-weight:950;

}


#usqFinalScore{

    margin:
        8px 0 6px;

    color:#dc2626;

    font-size:43px;

    line-height:1;

    font-weight:950;

}


#usqResultText{

    max-width:330px;

    margin:
        0 auto 16px;

    color:#64748b;

    font-size:11px;

    line-height:1.45;

}


.usq-final-card{

    padding:
        19px 16px 16px;

    border-radius:18px;

    color:#fff;

    text-align:left;

    background:
        linear-gradient(
            135deg,
            #132944,
            #1d3c5c
        );

}


.usq-final-label{

    color:#ffc6cb;

    font-size:9px;

    font-weight:900;

    letter-spacing:.6px;

}


.usq-final-title{

    margin:
        6px 0;

    color:#fff;

    font-size:20px;

    line-height:1.2;

    font-weight:950;

}


.usq-final-copy{

    margin-bottom:14px;

    color:
        rgba(255,255,255,.80);

    font-size:10.8px;

    line-height:1.48;

}


#usqReplay{

    display:inline-flex;

    margin-top:12px;

    padding:
        8px 14px;

    border:
        1px solid #d9e1e7;

    border-radius:999px;

    color:#617284;

    cursor:pointer;

    font-size:9px;

    font-weight:850;

}



/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:600px){


    #usamiSummerChallenge{

        right:8px;

        bottom:8px;

    }


    #usqLauncher{

        width:305px;

        max-width:
            calc(100vw - 16px);

    }


    #usqPanel{

        width:
            calc(100vw - 16px);

        max-width:430px;

        height:auto;

        min-height:0;

        max-height:
            calc(100vh - 16px);

    }


    #usqAnswers{

        grid-template-columns:
            1fr 1fr;

    }

}


/* ==========================================================
   OVERLAY MODALE (sfondo scuro dietro il quiz aperto)
========================================================== */

#usqOverlay{

    display:none;

    position:fixed;

    inset:0;

    z-index:999999;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(2px);

}

#usqOverlay.usq-show{

    display:block;

}


/* pannello centrato responsive su mobile */

@media(max-width:600px){

    #usqPanel{

        width:calc(100vw - 20px);

        max-width:none;

        max-height:calc(100vh - 20px);

    }

}


/* ==========================================================
   HOME: pulsante compatto (pillola) in basso a destra
========================================================== */

#usamiSummerChallenge.usq-floating{

    position:fixed;

    right:16px;

    bottom:16px;

    z-index:999999;

    margin:0;

    width:auto;

    max-width:calc(100vw - 24px);

}

/* il launcher diventa una pillola bassa */

#usamiSummerChallenge.usq-floating #usqLauncher{

    width:auto;

    max-width:none;

    padding:10px 16px 10px 10px;

    border-radius:999px;

    cursor:pointer;

    box-shadow:0 10px 26px rgba(15,23,42,.22);

}

#usamiSummerChallenge.usq-floating .usq-launch{

    gap:10px;

    align-items:center;

}

/* logo piu' piccolo nella pillola */

#usamiSummerChallenge.usq-floating .usq-logo{

    width:38px;

    height:38px;

    min-width:38px;

}

/* nella pillola mostro solo label + titolo brevi, nascondo il resto */

#usamiSummerChallenge.usq-floating .usq-launch-copy,
#usamiSummerChallenge.usq-floating .usq-launch-record{

    display:none;

}

#usamiSummerChallenge.usq-floating .usq-launch-label{

    font-size:8px;

    margin:0;

}

#usamiSummerChallenge.usq-floating .usq-launch-title{

    font-size:14px;

    margin:0;

    white-space:nowrap;

}

/* freccia visibile nella pillola */

#usamiSummerChallenge.usq-floating .usq-arrow{

    margin-left:2px;

}

@media(max-width:600px){

    #usamiSummerChallenge.usq-floating{

        right:10px;

        bottom:10px;

    }

    #usamiSummerChallenge.usq-floating #usqLauncher{

        padding:8px 14px 8px 8px;

    }

    #usamiSummerChallenge.usq-floating .usq-logo{

        width:32px;

        height:32px;

        min-width:32px;

    }

    #usamiSummerChallenge.usq-floating .usq-launch-title{

        font-size:13px;

    }

}


/* ==========================================================
   FASCIA ESTIVA (scenetta mare) nella schermata risultato
========================================================== */

.usq-beach{

    width:100%;

    max-width:320px;

    margin:2px auto 12px;

    border-radius:14px;

    overflow:hidden;

    box-shadow:0 4px 14px rgba(15,23,42,.10);

}

.usq-beach svg{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================================================
   POPUP INVITO (riquadretto discreto in basso a destra)
========================================================== */

#usqInvite{

    display:none;

    position:fixed;

    right:16px;

    bottom:16px;

    z-index:999998;

    width:auto;

    max-width:calc(100vw - 24px);

    align-items:center;

    gap:12px;

    padding:12px 14px 12px 12px;

    background:#ffffff;

    border:1px solid #e3e8ee;

    border-radius:16px;

    box-shadow:0 14px 34px rgba(15,23,42,.20);

    animation:usqInviteIn .35s ease;

}

#usqInvite.usq-show{

    display:flex;

}

@keyframes usqInviteIn{

    from{ opacity:0; transform:translateY(12px); }

    to{ opacity:1; transform:translateY(0); }

}

.usq-invite-emoji{

    font-size:26px;

    line-height:1;

}

.usq-invite-title{

    font-weight:900;

    color:#172f49;

    font-size:14px;

    line-height:1.1;

}

.usq-invite-sub{

    color:#64748b;

    font-size:11px;

    margin-top:2px;

}

.usq-invite-go{

    border:0;

    cursor:pointer;

    background:#c51f2c;

    color:#fff;

    font-weight:800;

    font-size:13px;

    padding:9px 14px;

    border-radius:999px;

    white-space:nowrap;

    transition:opacity .15s;

}

.usq-invite-go:hover{

    opacity:.9;

}

#usqInviteClose{

    position:absolute;

    top:-8px;

    right:-8px;

    width:24px;

    height:24px;

    border-radius:50%;

    border:0;

    cursor:pointer;

    background:#172f49;

    color:#fff;

    font-size:16px;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 2px 6px rgba(15,23,42,.3);

}

@media(max-width:600px){

    #usqInvite{

        right:10px;

        bottom:10px;

        padding:10px 12px 10px 10px;

    }

    .usq-invite-emoji{ font-size:22px; }

    .usq-invite-title{ font-size:13px; }

    .usq-invite-go{ font-size:12px; padding:8px 12px; }

}