body {
    text-align: center;
    background-color: #000000;
    background-image: url("background.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    padding-top: 10px;
}

/* VIDEO */
#player {
    width: 100%;
    max-height: 100vh;
    background: black;
    object-fit: contain;
    pointer-events: none;
}

/* FORM */
#form-container {
    text-align: center;
    z-index: 5;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    margin: 20px auto;
    color: white;
    width: 90%;
    max-width: 600px;
}

/* POPUP */
#number-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f9f9f9;
    padding: 15px;
    border: 2px solid #ccc;
    z-index: 9999;
    width: 95%;
    max-width: 354px;
    border-radius: 10px;
}

/* GRID layout: green ball top center, 6 per row */
.number-popup-content {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    gap: 6px; /* smaller gap for fit */
}

/* Prevent mobile zoom */
input, textarea, select {
    font-size: 16px !important;
}

/* BALLS — resized to fit 6 columns within 354px */
.number-green, .number-red, .number-black {
    user-select: none;
    width: 48px;      /* reduced */
    height: 48px;     /* reduced */
    border-radius: 50%;
    color: white;
    font-size: 18px;  /* reduced */
    font-weight: bold;

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

    cursor: pointer;

    background: radial-gradient(circle at 30% 30%, #ffffff40, #000000d0);
    box-shadow:
        inset 6px 6px 10px #ffffff25,
        inset -6px -6px 10px #00000080,
        0 6px 16px rgba(0,0,0,0.65);

    transition: transform 0.12s;
    margin: 0; /* remove margin for fit */
}

/* Hover + active */
.number-green:hover,
.number-red:hover,
.number-black:hover {
    transform: scale(1.05);
}
.number-green:active,
.number-red:active,
.number-black:active {
    transform: scale(0.92);
}

/* Colors */
.number-red { background-color: #c70000 !important; }
.number-black { background-color: #000000 !important; }
.number-green { background-color: #0f7f00 !important; }

/* MOBILE sizing */
@media (max-width: 480px) {
    .number-green, .number-red, .number-black {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* Green ball spans full row top-center */
.number-popup-content .number-green:first-child {
    grid-column: 1 / -1;
    justify-self: center;
}

#copy-button {
    margin-top: 10px;
    padding: 10px 20px;
    display: block;
    margin: 12px auto;
}