* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;

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

    background:
        radial-gradient(circle at top, #18213d, #080c18 70%);

    color: white;

    font-family: Arial, sans-serif;
}

main {
    width: 95%;
    max-width: 700px;

    padding: 50px 35px;

    text-align: center;

    background: rgba(21, 28, 50, 0.95);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 30px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* TITLE */

h1 {
    margin: 0;

    font-size: 44px;

    letter-spacing: 3px;
}

/* MESSAGE */

#message {
    margin: 12px auto 30px;

    max-width: 500px;

    color: #b8bfd3;

    font-size: 17px;

    line-height: 1.5;
}

/* TIMER */

#timer {
    font-size: 100px;

    font-weight: bold;

    letter-spacing: 2px;

    font-variant-numeric: tabular-nums;

    margin: 20px 0;

    text-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ATTEMPTS */

#attempts {
    color: #8992ad;

    font-size: 16px;

    margin-bottom: 15px;
}

/* RESULT */

#result {
    min-height: 55px;

    margin-bottom: 20px;

    font-size: 18px;

    line-height: 1.5;
}

#result strong {
    font-size: 28px;
}

/* BUTTONS */

.buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}

button {
    min-width: 130px;

    padding: 16px 28px;

    border: none;

    border-radius: 13px;

    color: white;

    font-size: 17px;

    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.15s,
        box-shadow 0.15s;
}

/* START */

#startButton {
    background: #6c63ff;

    box-shadow:
        0 7px 0 #453fb0,
        0 14px 25px rgba(108, 99, 255, 0.3);
}

/* STOP */

#stopButton {
    background: #ff4f70;

    box-shadow:
        0 7px 0 #b8324d,
        0 14px 25px rgba(255, 79, 112, 0.25);
}

/* FLOATING EFFECT */

button:hover {
    transform: translateY(-4px);
}

button:active {
    transform: translateY(3px);
}

#startButton:active {
    box-shadow:
        0 3px 0 #453fb0;
}

#stopButton:active {
    box-shadow:
        0 3px 0 #b8324d;
}

/* CONFETTI */

.confetti {
    position: fixed;

    top: -25px;

    width: 10px;
    height: 18px;

    z-index: 99999;

    pointer-events: none;

    border-radius: 2px;

    animation:
        confettiFall 4s linear forwards;
}

@keyframes confettiFall {
    0% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    100% {
        transform:
            translateY(110vh)
            rotate(720deg);
    }
}

/* MOBILE */

@media (max-width: 600px) {
    main {
        padding: 35px 20px;
    }

    h1 {
        font-size: 34px;
    }

    #timer {
        font-size: 70px;
    }

    button {
        min-width: 120px;

        padding: 14px 20px;
    }
}

/* =========================
   GAME HUB BACK BUTTON
========================= */

.back-button {
    position: fixed;

    top: 25px;
    left: 25px;

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

    padding: 13px 20px;

    background: #151c32;

    color: white;

    border: 1px solid #3a4563;

    border-radius: 13px;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    box-shadow:
        0 6px 0 #0c1020,
        0 12px 25px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.15s,
        box-shadow 0.15s,
        background 0.15s;

    z-index: 9999;
}

/* HOVER */

.back-button:hover {
    background: #202a46;

    transform: translateY(-4px);

    box-shadow:
        0 10px 0 #0c1020,
        0 18px 30px rgba(0, 0, 0, 0.4);
}

/* CLICK */

.back-button:active {
    transform: translateY(3px);

    box-shadow:
        0 3px 0 #0c1020;
}

/* MOBILE */

@media (max-width: 600px) {
    .back-button {
        top: 15px;
        left: 15px;

        padding: 11px 15px;

        font-size: 12px;
    }
}