body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#0b0b0f;
    color:white;
}

/* =========================
   INTRO
========================= */
.intro{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;

    background: radial-gradient(circle at 50% 20%, #3a0000, #000 70%);
}

.intro-title{
    font-size:34px;
    margin-bottom:10px;
    letter-spacing:2px;
}

.intro-text{
    opacity:.8;
    margin-bottom:20px;
}

/* =========================
   RINGMASTER
========================= */
.presenter-single{
    width: min(260px, 70vw);
    height: min(360px, 55vh);

    border-radius:16px;
    overflow:hidden;

    border:2px solid rgba(255,215,0,.35);
    box-shadow:0 0 60px rgba(255,0,0,.25);

    margin:20px 0;
}

.presenter-single img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   BUTTON
========================= */
.enter-button{
    display:inline-block;

    margin-top:10px;
    padding:14px 22px;

    min-width:200px;

    border-radius:999px;
    text-decoration:none;
    color:white;

    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.06);
}

/* =========================
   GAME
========================= */
.hud{
    text-align:center;
    padding:14px;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:18px;
}

.score{
    font-size:14px;
    opacity:.7;
    margin-top:6px;
}

.game{
    min-height:calc(100vh - 80px);
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.card{
    text-align:center;
    max-width:90vw;
}

.main-image{
    max-width:100%;
    max-height:70vh;
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
}

/* =========================
   BUTTONS (GAME)
========================= */
.buttons{
    margin-top:20px;
    display:flex;
    justify-content:center;
    gap:16px;
}

.btn{
    display:inline-block;
    padding:14px 22px;
    min-width:120px;

    border-radius:999px;
    text-decoration:none;

    color:white;
    font-weight:bold;
    font-size:16px;

    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.05);
}

.btn.top{
    background:rgba(124,255,155,.12);
}

.btn.slop{
    background:rgba(255,107,139,.12);
}

/* =========================
   MOBILE
========================= */
@media (max-width:600px){

    .intro-title{
        font-size:28px;
    }

    .presenter-single{
        width:90vw;
        height:55vh;
    }

    .enter-button{
        width:85%;
        font-size:18px;
        padding:16px;
    }

    .btn{
        width:45%;
        min-width:auto;
        font-size:18px;
        padding:16px;
    }

    .buttons{
        gap:12px;
    }
}