@font-face {
    font-family: "Vatsal-logo";
    src: url("../../assets/data/vatsal-logo-font.woff2") format("woff2");
    font-display: swap;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#070707;
    --card:#141414;
    --red:#ff1e38;
    --gold:#ffcc00;
    --green:#00ff9d;
    --text:#ffffff;
    --muted:#aaaaaa;
}

body{
    font-family:'Inter',sans-serif;
    background:#050505;
    color:white;
    overflow:hidden;
    height:100vh;
    display:flex;
    flex-direction:column;
}
/* ===========================
BACKGROUND
=========================== */

.bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-2;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,0,60,0.18), transparent 25%),
        radial-gradient(circle at 80% 30%, rgba(0,255,200,0.12), transparent 25%),
        radial-gradient(circle at 50% 90%, rgba(255,200,0,0.15), transparent 30%),
        #050505;
    animation:bgMove 10s infinite alternate linear;
}

@keyframes bgMove{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.1) rotate(2deg);
    }
}

/* ===========================
PARTICLES
=========================== */

.particles{
    position:fixed;
    inset:0;
    z-index:-1;
}

.particle{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,255,255,0.4);
    animation:float linear infinite;
}

@keyframes float{
    from{
        transform:translateY(100vh) scale(0);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    to{
        transform:translateY(-120vh) scale(1.5);
        opacity:0;
    }
}

/* ===========================
START PAGE
=========================== */

.start-screen{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    overflow-y:auto;
}

.start-inner{
    width:min(900px,95%);
    text-align:center;
    animation:fadeUp 1s ease;
}
@keyframes fadeUp{
    from{
        transform:translateY(30px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}

.title{
    font-family:'Anton',sans-serif;
    font-size:5rem;
    letter-spacing:4px;
    color:var(--red);
    text-shadow:0 0 25px rgba(255,0,60,0.6);
}

.subtitle{
    margin-top:10px;
    color:#ddd;
    font-size:1.1rem;
    line-height:1.8;
}

.how{
    margin-top:35px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
}

.how-card{
    padding:16px;
    border-radius:14px;
}

.how-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,0,70,0.3);
}

.how-card h3{
    margin-bottom:10px;
    color:var(--gold);
}

.mode-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;
}

.mode-btn{
    border:none;
    cursor:pointer;
    padding:18px 35px;
    border-radius:60px;
    color:white;
    font-size:1rem;
    font-weight:800;
    letter-spacing:1px;
    transition:0.35s;
    position:relative;
    overflow:hidden;
}

.mode-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent);
    transform:translateX(-100%);
}

.mode-btn:hover::before{
    animation:shine 1s;
}

@keyframes shine{
    to{
        transform:translateX(200%);
    }
}

.hollywood{
    background:linear-gradient(135deg,#ff1e38,#ff6a00);
    box-shadow:0 0 30px rgba(255,0,60,0.5);
}

.bollywood{
    background:linear-gradient(135deg,#00c6ff,#0072ff);
    box-shadow:0 0 30px rgba(0,120,255,0.5);
}

.mode-btn:hover{
    transform:scale(1.06);
}

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

.game-screen{
    display:none;
    flex:1;
    width:100%;
    flex-direction:column;
    overflow:hidden;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 30px;
}

.logo{
    font-family:'Anton',sans-serif;
    font-size:2.5rem;
    letter-spacing:2px;
}

.stats{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.stat{
    background:rgba(255,255,255,0.05);
    padding:12px 18px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    text-align:center;
    min-width:100px;
}

.stat span{
    display:block;
    margin-top:5px;
    font-weight:700;
    font-size:1.2rem;
}

.game-area{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.quiz-card{
    width:min(800px,95%);
    background:rgba(15,15,15,0.9);
    border-radius:30px;
    padding:40px;
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    position:relative;
    overflow:hidden;
}

.quiz-card::after{
    content:'';
    position:absolute;
    inset:-2px;
    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,0.06),
        transparent
    );

    animation:borderRun 4s linear infinite;

    pointer-events:none;
}

@keyframes borderRun{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}

.emoji{
    font-size:6rem;
    text-align:center;
    margin-bottom:25px;
    animation:bounce 1.4s infinite ease-in-out;
}

@keyframes bounce{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-12px);
    }
}

.timer{
    width:100%;
    height:14px;
    background:#1f1f1f;
    border-radius:30px;
    overflow:hidden;
}

.timer-bar{
    height:100%;
    width:100%;
    background:linear-gradient(90deg,#00ff9d,#ffcc00,#ff3c3c);
    transition:width 1s linear;
}

button{
    border:none;
    cursor:pointer;
}

.options-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:25px;
}

.option-btn{
    min-height:72px;
    background:
        linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.025)),
        #0e0e0e;
    border:1px solid rgba(255,255,255,0.09);
    color:white;
    padding:17px 18px;
    border-radius:16px;
    font-weight:800;
    font-size:0.96rem;
    line-height:1.35;
    letter-spacing:0.2px;
    text-align:left;
    position:relative;
    overflow:hidden;
    transition:
         transform .12s ease,
        border-color .12s ease,
        box-shadow .12s ease,
        background .12s ease;

    will-change:transform;
    transform:translateZ(0);

}

.option-btn::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.13),
        transparent);
    transform:translateX(-120%);
    z-index:-1;
}

.option-btn:hover:not(:disabled),
.option-btn:focus-visible:not(:disabled){
    transform:translateY(-2px);
    border-color:rgba(255,204,0,0.36);
    box-shadow:0 0 24px rgba(255,204,0,0.12);
    outline:none;
}

.option-btn:hover:not(:disabled)::before,
.option-btn:focus-visible:not(:disabled)::before{
    animation:shine 0.9s;
}

.option-btn:active:not(:disabled){
    transform:scale(0.98);
}

.option-btn:disabled{
    cursor:default;
}
.option-btn:active{
    transform:scale(.97);
}
.option-btn.correct-choice{
    background:
        linear-gradient(135deg,rgba(0,255,157,0.24),rgba(0,255,157,0.08)),
        #0b1712;
    border-color:rgba(0,255,157,0.78);
    box-shadow:0 0 30px rgba(0,255,157,0.24);
}

.option-btn.wrong-choice{
    background:
        linear-gradient(135deg,rgba(255,30,56,0.28),rgba(255,30,56,0.08)),
        #1a0b0d;
    border-color:rgba(255,30,56,0.82);
    box-shadow:0 0 28px rgba(255,30,56,0.2);
}

.option-btn.dimmed-choice{
    opacity:0.58;
}

.quiz-card.combo-hot{
    box-shadow:
        0 0 42px rgba(255,204,0,0.2),
        0 0 72px rgba(255,30,56,0.12);
}

.controls{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:20px;
    flex-wrap:wrap;
}

.small-btn{
    background:#1f1f1f;
    color:white;
    padding:12px 18px;
    border-radius:12px;
    transition:0.3s;
}

.small-btn:hover{
    background:#2a2a2a;
}

.message{
    min-height:35px;
    text-align:center;
    margin-top:20px;
    font-weight:700;
}

.correct{
    color:var(--green);
}

.wrong{
    color:#ff5555;
}

/* ===========================
GAME OVER
=========================== */
.score-screen{
    flex:1;
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
    overflow-y:auto;
    position:relative;
    z-index:10;
}

.score-inner{
    width:min(950px,95%);
    padding:20px 0 40px;
}

.score-title{
    font-family:'Anton',sans-serif;
    font-size:4rem;
    text-align:center;
    color:var(--gold);
}

.summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:20px;
    margin-top:30px;
}

.summary-box{
    background:rgba(255,255,255,0.05);
    padding:20px;
    border-radius:18px;
    text-align:center;
}

.summary-box h3{
    color:#aaa;
}

.summary-box span{
    display:block;
    margin-top:10px;
    font-size:2rem;
    font-weight:800;
}

.remark{
    text-align:center;
    margin-top:30px;
    font-size:1.5rem;
    color:var(--green);
    font-weight:800;
}

.history{
    margin-top:35px;
}

.history-item{
    display:flex;
    justify-content:space-between;
    padding:14px;
    border-radius:12px;
    margin-bottom:10px;
    font-weight:600;
}

.right{
    background:rgba(0,255,157,0.1);
    border:1px solid rgba(0,255,157,0.3);
}

.wrong-item{
    background:rgba(255,50,50,0.1);
    border:1px solid rgba(255,50,50,0.3);
}

.restart{
    display:block;
    margin:35px auto 0;
    background:var(--red);
    color:white;
    padding:16px 35px;
    border-radius:50px;
    font-weight:800;
    font-size:1rem;
}
@media (max-width:768px){

    /* ---------- START SCREEN ---------- */

  .start-screen{
    justify-content:center;
    align-items:center;
    overflow:hidden;
    padding:16px;
}

 
    .title{
        font-size:2.3rem;
        margin-bottom:6px;
    }

    .subtitle{
        font-size:.95rem;
        line-height:1.5;
    }

    .how{
        margin-top:14px;
        gap:10px;
    }

    .mode-buttons{
        margin-top:18px;
        gap:10px;
    }

    .mode-btn{
        padding:14px 22px;
        font-size:.9rem;
    }

    .emoji{
    font-size:3rem;
    margin-bottom:12px;
}

    .start-card{
        padding:30px 20px;
        margin:0 auto;
    }

    /* ---------- GAME ---------- */

    .topbar{
        padding:14px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

   .logo{
    font-size:1.45rem;
}

    .stats{
        width:100%;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }

    .stat{
        min-width:0;
        padding:10px 8px;
        font-size:.78rem;
    }

    .stat span{
        font-size:1rem;
    }

    .game-area{
        align-items:center;
        padding:8px 12px 16px;
    }

  .quiz-card{
    width:100%;
    padding:16px 14px;
    border-radius:20px;
}

    .options-grid{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:18px;
    }

   .option-btn{
    min-height:52px;
    padding:12px 14px;
    font-size:.9rem;
}
}

.guess-title{
    text-align:center;
    margin:8px 0 10px;
    font-family:'Anton',sans-serif;
    font-size:2.5rem;
    letter-spacing:2px;
    color:rgba(255,255,255,0.78);
    text-transform:uppercase;
    position:relative;
}

.guess-title::after{
    content:'';
    width:90px;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,204,0,0.8),
        transparent
    );
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
}
.quiz-card,
.option-btn,
.mode-btn{
    backface-visibility:hidden;
}
/* vatsal header */
.vatsal-header {
    margin: 0;
    padding: 10px 20px;
    flex-shrink: 0;
    z-index: 50;
    position: relative;
}

.vatsal-home {
    font-family: "Vatsal-logo" !important;
    color: var(--text) !important;
    text-decoration: none;
}
/* vatsal footer */
.vatsal-related-title,
.vatsal-footer,
.vatsal-footer a {
    font-family: "Vatsal-logo" !important;
    color: var(--text) !important;
}
/* footer below score screen */
.vatsal-related {
    position: relative;
    z-index: 10;
    background: transparent;
    padding-bottom: 40px;
}