:root {
    --ccc-departure-board-color-gold-01: #df9c05;
    --ccc-departure-board-color-gold-02: #f7c202;
    --ccc-departure-board-color-gold-03: #fccb02;
    --ccc-departure-board-color-gold-04: #efcb3f;

    --ccc-departure-board-color-background-grey-01: #28282a;
}


.ccc-departure-board-container {

    --dynamic-font-size: 2em;
    font-size: var(--dynamic-font-size);

    text-align: center;
    /* font-size: 2em; */
    background: #505559;
    
    .ccc-departure-board-characters-container {
        background: linear-gradient(to bottom, #363636, #303030);
        border: 0.02em solid #000;
        box-shadow: inset 0 0 0.25em rgba(0, 0, 0, 1);
        
        margin: 0;
        padding: 0 1em;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        min-height: 1em;
        
        display: flex;
        /* flex-direction: row; */
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 1px;
        
        .ccc-departure-board-character-container {
            /* for children */
            position: relative;
            
            margin: 0.5em 0;
            display: flex;
            flex-direction: row;
            width: 1em;
            height: 1.5em;
            
            .ccc-departure-board-tile {
                position: absolute;
                width: 1em;
                height: 1.5em;
                top: 0;
                left: 0;
                margin: 0;
                padding: 0;
            }


            .ccc-departure-board-character-layer {
                position: absolute;
                top: 50%;
                left: 50%;
                /* width: 100%;
                height: 100%; */
                transform: translate(-50%, -50%);
                font-family: "Victor Mono", serif;
                font-optical-sizing: auto;
                font-style: normal;
                font-weight: 400;
                color: #ffffff;
                text-transform: uppercase;
                /* border: #0f0 2px solid; */
                margin: 0;
                padding: 0;
            }

            .ccc-departure-board-top-layer {
                position: absolute;
                top: 0;
                left: 0.05em;
                width: 99%;
                height: 100%;
                background: linear-gradient(0deg,
                        #60656900 0%,
                        #757d8000 48.5%,
                        #21212199 49.0%,
                        #21212199 51.0%,
                        #757d8000 51.5%,
                        #60656900 100%);
                margin: 0;
                padding: 0;
            }

        }

    }

}