@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

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

body {
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
    color: #f8fafc;
    background:
        radial-gradient(circle at 82% 14%, rgba(249, 115, 22, 0.35), transparent 30%),
        linear-gradient(145deg, #0b1220, #1e293b);
}

h1 {
    margin: 1.6rem auto 0;
    width: min(760px, 92vw);
    border-radius: 18px;
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 2.4rem;
}

.choice {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(15, 23, 42, 0.75);
    transition: transform 0.2s ease;
}

.choice:hover {
    transform: translateY(-4px) scale(1.03);
    cursor: pointer;
}

img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 50%;
}

.score-board {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

#user-score,
#comp-score {
    font-size: clamp(2.1rem, 8vw, 3.5rem);
    color: #fdba74;
}

.msg-container {
    margin-top: 2rem;
}

#msg {
    display: inline-block;
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

#reset-btn {
    margin: 1.6rem 0 2rem;
    padding: 0.75rem 1.4rem;
    font-size: 1.05rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(130deg, #f97316, #ef4444);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}