/* =========================
   VARIABLES
========================= */

:root{
    --bg:#07111f;

    --glass:rgba(255,255,255,.08);
    --glass-hover:rgba(255,255,255,.12);

    --border:rgba(255,255,255,.12);

    --text:#fff;
    --text-muted:#b8c5d6;

    --primary:#45b6ff;
    --primary-hover:#5ec4ff;

    --shadow:0 20px 45px rgba(0,0,0,.35);

    --radius:20px;
}

/* =========================
   GLOBAL
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:Arial,sans-serif;

    color:var(--text);

    background:
        radial-gradient(circle at top right,#15365d 0%,transparent 35%),
        radial-gradient(circle at bottom left,#0f2848 0%,transparent 40%),
        var(--bg);

}

button{

    cursor:pointer;

    border:none;

    transition:.25s;

}

/* =========================
   SHARED GLASS CARD
========================= */

.quiz-card,
.results-card,
.flag-card{

    background:var(--glass);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

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

.quiz-page{

    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;

}

.quiz-card{

    width:min(850px,100%);

    padding:40px;

}

.quiz-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.stats{

    display:flex;

    gap:25px;

    color:var(--text-muted);

    font-weight:600;

}

.image-container,
.results-image,
.flag-image{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:35px 0 20px;

}

.image-container img{

    width:260px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 15px 30px rgba(0,0,0,.35);

}

.question{

    text-align:center;

    margin-bottom:35px;

}

.question h2{

    font-size:1.8rem;

}

.answers form{

    display:grid;

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

    gap:18px;

}

.answers button{

    width:100%;

    min-height:65px;

    padding:18px 24px;

    border-radius:14px;

    background:var(--glass);

    color:var(--text);

    border:1px solid var(--border);

    font-size:1rem;

    font-weight:600;

}

.answers button:hover{

    transform:translateY(-2px);

    background:var(--glass-hover);

    border-color:rgba(69,182,255,.45);

}

/* =========================
   RESULTS
========================= */

.results-page{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.results-card{

    width:min(650px,100%);

    padding:45px;

    text-align:center;

}

.results-header{

    margin-bottom:30px;

}

.results-header h1{

    font-size:2.3rem;

}

.results-image img{

    width:220px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 15px 30px rgba(0,0,0,.35);

}

.results-content{

    margin-bottom:35px;

}

.results-label{

    color:var(--text-muted);

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.results-score{

    font-size:4rem;

    color:var(--primary);

    margin-bottom:20px;

    text-shadow:0 0 18px rgba(69,182,255,.35);

}

.results-message{

    max-width:420px;

    margin:auto;

    line-height:1.7;

    color:var(--text-muted);

}

.results-form{

    width:100%;

}

.play-again-btn{

    width:100%;

    padding:18px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-size:1rem;

    font-weight:700;

}

.play-again-btn:hover,
.start-quiz-btn:hover{

    transform:translateY(-2px);

    background:var(--primary-hover);

    box-shadow:0 0 18px rgba(69,182,255,.35);

}

/* =========================
   FLAGS
========================= */

.flags-page{

    width:min(1200px,100%);

    margin:auto;

    padding:50px 30px;

}

.flags-header{

    text-align:center;

    margin-bottom:50px;

}

.flags-header h1{

    font-size:3rem;

    margin-bottom:10px;

}

.flags-header p{

    color:var(--text-muted);

}

.flags-grid{

    display:grid;

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

    gap:30px;

}

.flag-card{

    padding:25px;

    text-align:center;

    transition:.25s;

}

.flag-card:hover{

    transform:translateY(-4px);

    background:var(--glass-hover);

    border-color:rgba(69,182,255,.45);

}

.flag-image img{

    width:220px;

    height:140px;

    object-fit:cover;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.15);

}

.flag-card h2{

    font-size:1.3rem;

    margin-bottom:8px;

}

.flag-card p{

    color:var(--text-muted);

}

.flags-grid a,
.flags-grid a:visited,
.flags-grid a:hover,
.flags-grid a:active{

    text-decoration:none;

    color:var(--text);

}

.start-quiz-btn{

    display:inline-block;

    margin-top:25px;

    padding:16px 36px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

    .flags-grid{

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

    }

}

@media (max-width:600px){

    .flags-grid{

        grid-template-columns:1fr;

    }

}

.header-actions{

    display:flex;

    align-items:center;

    gap:20px;

}

.home-btn{

    padding:10px 18px;

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:12px;

    color:var(--text);

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.home-btn:hover{

    transform:translateY(-2px);

    background:var(--glass-hover);

    border-color:rgba(69,182,255,.45);

}

/* =========================
   COUNTRY PAGE
========================= */

.country-page{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px;

}

.country-card{

    width:min(900px,100%);

    padding:40px;

    background:var(--glass);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.country-header{

    text-align:center;

    margin-bottom:35px;

}

.country-header h1{

    font-size:2.8rem;

    margin-bottom:10px;

}

.country-header p{

    color:var(--text-muted);

}

.country-flag{

    display:flex;

    justify-content:center;

    margin-bottom:40px;

}

.country-flag img{

    width:340px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:0 15px 30px rgba(0,0,0,.35);

}

.country-info{

    display:grid;

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

    gap:20px;

}

.info-box{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:14px;

    padding:20px;

}

.label{

    display:block;

    color:var(--text-muted);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.value{

    font-size:1.2rem;

    font-weight:700;

}

.back-btn{

    display:block;

    width:max-content;

    margin:40px auto 0;

    padding:16px 34px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.back-btn:hover{

    transform:translateY(-2px);

    background:var(--primary-hover);

    box-shadow:0 0 18px rgba(69,182,255,.35);

}

@media(max-width:700px){

    .country-info{

        grid-template-columns:1fr;

    }

    .country-flag img{

        width:100%;

        max-width:320px;

    }

}