ModelTuner {
    position: absolute;
    width: 100%;
    height: 100%;

    // ⛔ THE ROOT MUST NOT EAT CLICKS. It covers the screen so the card can be positioned against
    // its corner, and the weapon editor's overlay learnt this the hard way: `pointer-events: all`
    // here and the lobby underneath stops responding entirely.
    pointer-events: none;

    .card {
        position: absolute;
        right: 40px;
        bottom: 40px;
        width: 320px;
        flex-direction: column;
        padding: 18px 20px 14px 20px;
        background-color: rgba( 12, 14, 18, 0.92 );
        border: 1px solid rgba( 255, 255, 255, 0.10 );
        border-radius: 6px;

        // The card itself is what you click.
        pointer-events: all;
    }

    .title {
        font-size: 19px;
        color: #fff;
    }

    .sub {
        font-size: 13px;
        color: rgba( 255, 255, 255, 0.38 );
        margin-bottom: 10px;
    }

    // ⚠️ EIGHT PARTS IS TALLER THAN THE SCREEN LEAVES ROOM FOR at the small end, so the rows
    // scroll and the title, readout and buttons stay put. The flags line is the thing you came to
    // read; it must never be the thing that scrolled away.
    .rows
    {
        flex-direction: column;
        max-height: 420px;
        overflow-y: scroll;
        flex-shrink: 0;
    }

    .group
    {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba( 255, 255, 255, 0.30 );
        margin: 6px 0 1px 0;
    }

    // ⚠️ MONOSPACE AND SELECTABLE-LOOKING, because its whole job is to be copied by eye into a
    // command line. Digits that do not line up between two reads are digits you misread.
    .flags {
        font-family: Consolas, monospace;
        font-size: 14px;
        color: #cdeccd;
        background-color: rgba( 255, 255, 255, 0.05 );
        padding: 7px 10px;
        margin: 12px 0 10px 0;
        border-left: 2px solid rgba( 122, 209, 122, 0.5 );
    }

    .buttons {
        flex-direction: row;
        justify-content: space-between;

        button {
            flex-grow: 1;
            margin-right: 5px;
            padding: 7px 0;
            font-size: 12px;
            color: #fff;
            text-align: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
            background-color: rgba( 255, 255, 255, 0.10 );

            &:hover { background-color: rgba( 255, 255, 255, 0.20 ); }
            &:last-child { margin-right: 0px; }
        }

        .reset { background-color: rgba( 122, 209, 122, 0.22 ); }
        .print { background-color: rgba( 90, 160, 235, 0.25 ); }
        .close { background-color: rgba( 232, 65, 24, 0.25 ); }
    }

    .hint {
        font-size: 11px;
        color: rgba( 255, 255, 255, 0.28 );
        margin-top: 9px;
    }
}