* {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}


body {
    background: #222;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    height: 90vh;
    user-select: none;
    overflow: hidden;
    height: 100%;
}

#timer {
    text-align: center;
    font-size: 6.4rem;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#scramble {
    font-size: 2rem;
    position: absolute;
    width: 80vw;
    text-align: center;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

#results {
    position: absolute;
    bottom: 10%;
    left: 1rem;
}

#results th,
#results td {
    min-width: 3rem;
    text-align: center;
    padding: 0 0.5rem;
}

#average,
#best {
    font-size: 2rem;
}

#notice {
    text-align: center;
    padding: 10px 0;
}

#m_notice {
    display: none;
}

@media (max-width: 1050px) {
    #timer {
        font-size: 4rem;
        top: 43%;
    }

    #m_notice {
        display: block;
        font-size: 1.7rem;
        font-weight: bold;
        font-family: 'Courier New', Courier, monospace;
        position: absolute;
        width: 100vw;
        top: 50%;
        text-align: center;

    }

    #scramble {
        font-size: 1.3rem;
        width: 90vw;
        top: 2rem;
    }

    #results {
        display: block;
        position: absolute;
        bottom: 0rem;
        left: 1rem;
        margin: 0;
        max-width: 50vw;
    }

    #results td,
    #results tr {
        display: block;
    }

    #results tr {
        margin-bottom: 1em;
    }

    #results td {
        min-width: 3rem;
        text-align: left;
        padding: 0;
    }

    #results th {
        display: none;
    }

    #results td::before {
        content: attr(data-label);
        /* 用 data-label 显示列名 */
    }

    #average,
    #best,
    #target,
    #rate {
        font-size: 1rem;
        font-weight: 600;
    }

    #target::before {
        content: "-------------\ATarget:";
        white-space: pre;
    }

}

@media (max-height: 450px) {
    #timer {
        font-size: 15vh;
    }

}