/* Target number displayed to user (e.g., "75") */
.space-key-blank {
    background: transparent !important; /* Removes default background color/gradient */
    border: none !important; /* Hides the button box border completely */
    box-shadow: none !important; /* Removes any neon glowing effects */
    cursor: pointer;
    min-width: 120px; /* Gives it a wide, comfortable tap zone for children */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#spwritenum {
    color: #fffa65; /* Bright solar yellow neon */
    font-size: 3.4rem;
    font-weight: 700;
    display: inline-block;
    letter-spacing: 2px;
}

/* --- DYNAMIC TYPED OUTPUT CONTAINER --- */
#spnumword {
    display: flex;
    flex-direction: column; /* Explicitly forces row blocks to stack downwards */
    align-items: center;
    justify-content: center;
    gap: 14px; /* ↕️ Vertical spacing gap between Row 1 (SEVENTY) and Row 2 (ONE) */
    width: 100%;
    min-height: 65px;
    padding: 5px;
}

/* Placeholder text style before any letters are typed */
.word-placeholder {
    color: #00d8d6;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
}

/* --- AUTOMATIC WORD-BY-WORD ROW STACKING --- */
.word-row {
    display: flex;
    flex-direction: row; /* Keeps characters matching the same word aligned left-to-right */
    flex-wrap: nowrap; /* Ensures letters of a single word NEVER snap down on top of each other */
    justify-content: center;
    gap: 8px; /* ↔️ Horizontal space between boxes inside the same word */
    width: auto; /* 🌟 FIX: Stops the row wrapper from taking up 100% space and breaking flex */
}

/* --- THE UNIQUE RECTANGULAR TYPED LETTER BOX --- */
.user-typed-box {
    background: linear-gradient(180deg, rgba(24, 220, 255, 0.2) 0%, rgba(0, 216, 214, 0.05) 100%);
    border: 2px solid #00d8d6; /* Sharp cyberpunk neon cyan borders */
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    /* Landscape rectangular dimensions to completely look different from previous square app */
    width: clamp(34px, 2.2rem, 50px);
    height: clamp(44px, 2.8rem, 60px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 8px rgba(0, 216, 214, 0.3);
    animation: boxPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Transparent placeholder variant for spaces between words */
.user-space-box {
    width: clamp(20px, 1.5rem, 35px);
    height: clamp(44px, 2.8rem, 60px);
    display: inline-block;
}

@keyframes boxPop {
    0% {
        transform: scale(0.7);
        opacity: 0;
        filter: brightness(2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* Extra responsive phone scale downs */
@media only screen and (max-width: 394px) {
    #spwritenum {
        font-size: 2.5rem !important;
    }

    .word-placeholder {
        font-size: 1.9rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}

@media only screen and (min-width: 395px) and (max-width: 744px) and (max-height: 935px) {
    #spwritenum {
        font-size: 2.5rem !important;
    }

    .word-placeholder {
        font-size: 2.3rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}

@media (min-width: 745px) and (max-width: 1024px) {
    #spwritenum {
        font-size: 2.5rem !important;
    }

    .word-placeholder {
        font-size: 2.3rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}

@media (min-width: 1024px) and (max-width: 1365px) {
    #spwritenum {
        font-size: 2.5rem !important;
    }

    .word-placeholder {
        font-size: 2.3rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}

@media (min-width: 1366px) and (max-width: 1440px) {
    #spwritenum {
        font-size: 2.5rem !important;
    }

    .word-placeholder {
        font-size: 2.3rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}

@media (min-width: 1440px) {
    #spwritenum {
        font-size: 2.8rem !important;
    }

    .word-placeholder {
        font-size: 2.3rem !important;
    }

    .user-typed-box {
        font-size: 2rem;
        border-width: 2px;
    }
}