@font-face {
    font-family: "mtr-lcd";
    src: url("MTR-LCD_v16.ttf") format("truetype");
}
@font-face {
    font-family: "mtr-sung";
    src: url("MTRSung-V11.2.ttf") format("truetype");
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #232323;
    overflow: auto;
}

/* Outer container: full screen, centered */
.display-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

/* Inner fixed content (design resolution) */
.fixed-content {
    width: 1920px;   /* base width */
    height: 645px;  /* base height */
    transform-origin: top left;
    background: #000;
    color: #fff;
}

/* Example passenger info styling */
.header {
    font-family: "mtr-sung";
    font-size: 75px;
    height: 125px;
    background: #002754;
    display: flex;
    align-items: center;
    justify-content: center;

    .lrt-icon {
        display: inline-block;
        width: 85px;
        height: 85px;
        background: url("icon.png") no-repeat center center;
        background-size: contain;
        margin-right: 20px;
    }
    #stop-name-en {
        font-size: 50px;
    }
}
.screen-content {
    font-family: "mtr-lcd";
    display: flex;
    width: 100%;
    height: calc(100% - 165px); /* Subtract header height */
    background: #303439;
    padding: 20px 0;

    .clock-container {
        width: 384px;
        display: flex;
        align-items: center;

        .clock {
            width: 384px;
            height: 384px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;

            .clock-digital {
                font-family: "mtr-lcd";
                position: absolute;
                top: 222px;
                font-size: 73px;
                color: #fff5c2;
                background: #27157a;
                width: 235px;
                text-align: center;
            }

            .clock-base, .clock-signal, .clock-hr-hand, .clock-mn-hand, .clock-dk {
                width: 384px;
                height: 384px;
                position: absolute;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
            .clock-hr-hand, .clock-mn-hand, .clock-dk {
                filter: drop-shadow(0px 0px 5px rgba(32, 32, 32, .75))
            }
            .clock-hr-hand, .clock-mn-hand {
                transition-duration: 0.3s;
                transition-timing-function: cubic-bezier(0.25, 1.06, 0.7, 1.65);
            }

            .clock-base {
                background-image: url("./img/ck_unlit.png");
            }
            .clock-signal {
                background-image: url("./img/signal_black.png");
            }
            .clock-hr-hand {
                background-image: url("./img/hr.png");
            }
            .clock-mn-hand {
                background-image: url("./img/mn.png");
            }
            .clock-dk {
                background-image: url("./img/ck_dik.png");
            }
        }
    }
    .info-lines {
        flex: 1;
        gap: 10.5px;
        display: flex;
        flex-direction: column;
        padding: 10.5px 0;
        position: relative;
        height: 460.5px;

        &::after {
            content: "";
            display: block;
            background-color: #27157a;
            position: absolute;
            width: calc(100% - 68px);
            height: 100%;
            top: 0;
        }

        .info {
            display: flex;
            height: 68px;
            font-size: 68px;
            z-index: 500;

            .info-display {
                flex: 1;
                color: #fff5c2;
            }
            .info-signal {
                width: 68px;
                display: flex;
                align-items: center;
                justify-content: center;

                .signal-base {
                    width: 58px;
                    height: 58px;
                    background: #000;
                    border-radius: 100px;
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    font-size: 100px;
                    line-height: 1.1;
                    overflow: hidden;

                    span {
                        padding-top: 5px;
                        opacity: 1;
                        transition: opacity .2s;
                        transition-timing-function: cubic-bezier(0.06, 0.26, 0.58, 1);

                        &.red {
                            color: #fb2a2a;
                        }
                    }
                }
            }
        }
    }
}