/*
Source - https://stackoverflow.com/a
Posted by vsync, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-01, License - CC BY-SA 4.0
*/
.wrapper {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center
}
.numCounter {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-shadow: 0 0 2px #fff;
    font-weight: bold;
    white-space: normal;
    font-size: 25px;
}

    .numCounter > div {
        display: inline-block;
        vertical-align: top;
        height: 100%;
    }

        .numCounter > div > b {
            display: inline-block;
            width: 30px;
            height: 100%;
            margin: 0 0.1em;
            border-radius: 8px;
            text-align: center;
            background: white;
            overflow: hidden;
        }

            .numCounter > div > b::before {
                /* two full cycles so wrap values 10–19 still show digits */
                content: ' 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 ';
                display: block;
                word-break: break-all;
                -webkit-transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
                transition: 0.5s cubic-bezier(0.75, 0.15, 0.6, 1.15), text-shadow 150ms;
            }


            .numCounter > div > b.blur {
                text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.2), 0 0.1em 2px rgba(255, 255, 255, 0.6), 0 0.3em 3px rgba(255, 255, 255, 0.3), 0 -0.1em 2px rgba(255, 255, 255, 0.6), 0 -0.3em 3px rgba(255, 255, 255, 0.3);
            }

            .numCounter > div > b[data-value="1"]::before {
                margin-top: -50px;
            }

            .numCounter > div > b[data-value="2"]::before {
                margin-top: -100px;
            }

            .numCounter > div > b[data-value="3"]::before {
                margin-top: -150px;
            }

            .numCounter > div > b[data-value="4"]::before {
                margin-top: -200px;
            }

            .numCounter > div > b[data-value="5"]::before {
                margin-top: -250px;
            }

            .numCounter > div > b[data-value="6"]::before {
                margin-top: -300px;
            }

            .numCounter > div > b[data-value="7"]::before {
                margin-top: -350px;
            }

            .numCounter > div > b[data-value="8"]::before {
                margin-top: -400px;
            }

            .numCounter > div > b[data-value="9"]::before {
                margin-top: -450px;
            }

            /* disable transition when snapping back after wrap */
            .numCounter > div > b.noTrans::before {
                transition: none !important;
                -webkit-transition: none !important;
            }

            /* Allow forward-wrap positions 10-19 (same wheel, just one extra turn) */
            .numCounter > div > b[data-value="10"]::before {
                margin-top: -450px;
            }

            .numCounter > div > b[data-value="11"]::before {
                margin-top: -495px;
            }

            .numCounter > div > b[data-value="12"]::before {
                margin-top: -540px;
            }

            .numCounter > div > b[data-value="13"]::before {
                margin-top: -585px;
            }

            .numCounter > div > b[data-value="14"]::before {
                margin-top: -630px;
            }

            .numCounter > div > b[data-value="15"]::before {
                margin-top: -675px;
            }

            .numCounter > div > b[data-value="16"]::before {
                margin-top: -720px;
            }

            .numCounter > div > b[data-value="17"]::before {
                margin-top: -765px;
            }

            .numCounter > div > b[data-value="18"]::before {
                margin-top: -810px;
            }

            .numCounter > div > b[data-value="19"]::before {
                margin-top: -855px;
            }

        .numCounter > div:nth-last-child(3n):not(:first-child)::before {
            content: ",";
            display: inline;
            font-size: 1.1em;
            opacity: .6;
            color: white;
        }


html, body {
    height: 100%;
}

body {
    display: flex;
    align-items: start;
    justify-content: start;
    font-family: Arial;
}

.numCounter {
    overflow: hidden;
    padding: .4em;
    text-align: center;
    border-radius: 16px;
    background: #F26524;
}

    .numCounter b {
        color: #24338A;
    }