/* =========================================================
   ASTRO QUIZ
   MOBILE FIRST
========================================================= */

:root{

    --bg:#F7F2FF;
    --surface:#FFFFFF;

    --primary:#7A55F6;
    --primary-light:#B08BFF;

    --text:#161616;
    --text-light:#555;

    --radius:28px;
    --radius-sm:18px;
    --radius-lg:36px;

    --shadow:
        0 20px 60px rgba(122,85,246,.10);

    --space-1:.5rem;
    --space-2:.75rem;
    --space-3:1rem;
    --space-4:1.5rem;
    --space-5:2rem;

}

/* =========================================================
RESET
========================================================= */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

img{

    display:block;
    max-width:100%;

}

button{

    font:inherit;

}

/* =========================================================
CONTAINER
========================================================= */

#quiz-container{

    position:fixed;

    inset:0;

    background:var(--bg);

    z-index:999999;

    overflow:hidden;

}

.quiz-screen{

    width:100%;

    min-height:100dvh;

    display:flex;

    justify-content:center;

    align-items:stretch;

}

.quiz-screen[hidden]{

    display:none !important;

}

.quiz-page{

    position:relative;

    width:min(100%,430px);

    min-height:100dvh;

    padding:

        max(env(safe-area-inset-top),20px)

        22px

        max(env(safe-area-inset-bottom),26px);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    isolation:isolate;

    background:

        radial-gradient(circle at 20% 12%,
        rgba(176,139,255,.28),
        transparent 35%),

        radial-gradient(circle at 85% 35%,
        rgba(122,85,246,.18),
        transparent 30%),

        linear-gradient(
            180deg,
            #F7F2FF 0%,
            #F3EDFF 100%
        );

}

/* =========================================================
BACKGROUND
========================================================= */

.quiz-page::before{

    content:"";

    position:absolute;

    width:16rem;

    aspect-ratio:1;

    border-radius:50%;

    left:-5rem;

    top:-5rem;

    background:rgba(176,136,255,.22);

    filter:blur(70px);

}

.quiz-page::after{

    content:"";

    position:absolute;

    width:14rem;

    aspect-ratio:1;

    border-radius:50%;

    right:-4rem;

    top:35%;

    background:rgba(122,85,246,.16);

    filter:blur(70px);

}

.quiz-page>*{

    position:relative;

    z-index:2;

}

/* =========================================================
HERO
========================================================= */

.hero-decoration{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:1rem;

    margin-top:.25rem;

}

.hero-decoration .line{

    flex:1;

    height:2px;

    background:#D9CBFF;

    max-width:95px;

}

.hero-decoration .star{

    color:var(--primary);

    font-size:1.3rem;

}

.quiz-title{

    margin-top:1.25rem;

    text-align:center;

    font-size:clamp(2rem,6vw,2.6rem);

    line-height:1.05;

    font-weight:800;

    color:var(--text);

}

.quiz-subtitle{

    margin-top:1rem;

    text-align:center;

    font-size:clamp(1.35rem,4.5vw,1.8rem);

    line-height:1.2;

    font-weight:700;

    color:var(--text);

}

.quiz-description{

    margin-top:1rem;

    text-align:center;

    color:#555;

    font-size:1rem;

    line-height:1.6;

}

/* =========================================================
COMPARE
========================================================= */

.compare-wrapper{

    margin-top:2rem;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:.75rem;

}

.compare-card{

    background:#fff;

    border-radius:30px;

    padding:1rem;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    align-items:center;

}

.compare-card:first-child{

    transform:rotate(-4deg);

}

.compare-card:last-child{

    transform:rotate(4deg);

}

.leo-title{

    font-size:1.35rem;

    font-weight:700;

    text-align:center;

    color:var(--text);

}

.birth-date{

    margin-top:.5rem;

    font-size:.82rem;

}

.birth-time{

    margin-top:.25rem;

    color:var(--primary);

    font-weight:700;

    font-size:.9rem;

}

.birth-city{

    margin-top:.25rem;

    margin-bottom:.9rem;

    font-size:.82rem;

    text-align:center;

}

.compare-chart{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

}

.compare-middle{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:.5rem;

}

.compare-symbol{

    font-size:3rem;

    color:var(--primary);

    font-weight:800;

    line-height:1;

}

.compare-text{

    font-size:.85rem;

    color:var(--primary);

    text-align:center;

    line-height:1.2;

}

/* =========================================================
BUTTON
========================================================= */

.quiz-button{

    margin-top:auto;

    width:100%;

    height:64px;

    border:none;

    border-radius:22px;

    background:var(--primary);

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    box-shadow:

        0 16px 40px rgba(122,85,246,.28);

}

.quiz-button:active{

    transform:scale(.98);

}

/* =========================================================
QUIZ 2
========================================================= */

.quiz-page-2{

    display:flex;
    flex-direction:column;

    height:100dvh;
    min-height:100dvh;

    overflow:hidden;

    padding:
        max(env(safe-area-inset-top),18px)
        18px
        max(env(safe-area-inset-bottom),20px);

}

.quiz2-title{

    margin-top:4px;

    font-size:42px;

}

.quiz2-title span{

    display:block;

    margin-top:.35rem;

    background:linear-gradient(
        180deg,
        #B08BFF,
        #6E46F5
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.quiz2-subtitle{

    margin-top:6px;

}

.quiz2-subtitle strong{

    color:var(--primary);

}

.quiz2-body{

    flex:1;

    display:grid;

    grid-template-rows:
        auto
        1fr
        auto;

    gap:14px;

    min-height:0;

}

.quiz2-text{

    margin:8px 0;

    font-size:15px;

    line-height:1.35;

}

.quiz2-text strong{

    color:var(--primary);

}

/* =========================================================
CONTENT
========================================================= */

.quiz2-content{

    display:grid;

    grid-template-columns:1fr 160px;

    align-items:center;

    gap:12px;

}

.quiz2-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.quiz2-chart{

    width:100%;
    max-width:155px;
    aspect-ratio:1;

    display:block;

    object-fit:cover;

    border-radius:50%;
    overflow:hidden;

    box-shadow:0 12px 30px rgba(122,85,246,.12);

    flex-shrink:0;

}

.quiz2-left{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* =========================================================
FEATURE
========================================================= */

.feature{

    padding:8px 10px;

    gap:10px;

    border-radius:16px;

}

.feature span{

    width:42px;

    height:42px;

    font-size:22px;

}

.feature b{

    font-size:15px;

    line-height:1.2;

}

/* =========================================================
BOTTOM
========================================================= */

.quiz2-bottom{

    padding:10px 12px;

    gap:12px;

}

.quiz2-bottom-icon{

    width:56px;

    height:56px;

    font-size:30px;

}

.quiz2-bottom-text{

    font-size:16px;

    line-height:1.3;

}

.quiz2-bottom-text strong{

    font-size:22px;

}

/* =========================================================
TABLETS
========================================================= */

@media (min-width:520px){

    .quiz-page{

        padding:2rem;

    }

    .quiz2-content{

        grid-template-columns:1fr 1fr;

        align-items:center;

    }

    .quiz2-right{

        order:0;

    }

    .compare-wrapper{

        gap:1.2rem;

    }

}

/* =========================================================
DESKTOP ENHANCEMENT
========================================================= */

@media (min-width:768px){

    .quiz-screen{

        padding:2rem;

    }

    .quiz-page{

        min-height:auto;

        border-radius:34px;

        max-width:430px;

        box-shadow:

            0 40px 90px rgba(0,0,0,.12);

    }

}
/* Responsive adjustments limited to the two preland screens. */
@media (max-width: 767px) {
    #quiz-container .quiz-screen {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        align-items: flex-start;
        margin-bottom: 0;
    }

    #quiz-container .quiz-page {
        height: auto;
        padding: max(env(safe-area-inset-top), 18px) 18px max(env(safe-area-inset-bottom), 24px);
    }

    #quiz-container .quiz-page > * {
        flex-shrink: 0;
    }

    #quiz-container .quiz-title,
    #quiz-container .quiz2-title {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.12;
        margin: 16px 0 12px;
    }

    #quiz-1 .quiz-subtitle {
        font-size: clamp(20px, 5.5vw, 23px);
        line-height: 1.3;
        margin: 0 0 12px;
    }

    #quiz-1 .quiz-description {
        margin-top: 0;
        line-height: 1.5;
    }

    #quiz-1 .compare-wrapper {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        margin: 24px 0;
    }

    #quiz-1 .compare-card {
        min-width: 0;
        padding: 12px 8px;
        border-radius: 24px;
        text-align: center;
    }

    #quiz-1 .compare-text {
        font-size: 12px;
    }

    #quiz-1 .compare-chart,
    #quiz-2 .quiz2-chart {
        height: auto;
        aspect-ratio: auto;
    }

    #quiz-container .quiz-button {
        flex-shrink: 0;
        min-height: 56px;
        height: auto;
        padding: 16px;
        font-size: 20px;
        line-height: 1.2;
        margin-top: auto;
    }

    #quiz-2 .quiz2-subtitle {
        font-size: 16px;
        line-height: 1.5;
        margin: 0 0 12px;
    }

    #quiz-2 .quiz2-body {
        flex: 0 0 auto;
        grid-template-rows: auto auto auto;
        gap: 16px;
        margin-bottom: 20px;
    }

    #quiz-2 .quiz2-text {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
    }

    #quiz-2 .quiz2-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 110px);
        gap: 12px;
    }

    #quiz-2 .feature {
        display: flex;
        align-items: center;
        padding: 6px 0;
        gap: 8px;
    }

    #quiz-2 .feature span {
        width: 24px;
        height: auto;
        flex-shrink: 0;
        font-size: 20px;
    }

    #quiz-2 .feature b {
        min-width: 0;
        line-height: 1.4;
    }

    #quiz-2 .quiz2-bottom {
        display: flex;
        align-items: center;
        padding: 8px 0;
        gap: 10px;
    }

    #quiz-2 .quiz2-bottom-icon {
        width: auto;
        height: auto;
        flex-shrink: 0;
    }

    #quiz-2 .quiz2-bottom-text strong {
        font-size: 20px;
    }
}

@media (max-width: 359px) {
    #quiz-2 .quiz2-content {
        grid-template-columns: minmax(0, 1fr);
    }

    #quiz-2 .quiz2-chart {
        max-width: 120px;
    }
}