// Difficulty — a fullscreen page over the lobby (2026-10-05), in Map select's look: the presets and the settings down the left,
// the setting pointed at far right. Inter, solid strips with a left rule, the gold accent.
//
// ⛔ CLASS NAMES THE LOBBY DOESN'T USE (`dif…`). This page renders INSIDE the lobby's root, so every `.lobby .x` rule in
// LobbyMenu.razor.scss reaches an element of ours called `.x` (MapBrowser.razor.scss's first note, learnt the hard way).
//
// ⚠️ `pointer-events: all`, because the lobby's root is `none`: a panel that declares neither cannot be clicked in s&box.
//
// ⚠️ SIZES IN THE 1080-HIGH UI SPACE, like the lobby's and Map select's.

$gold: #ffd479;

.difpage
{
    font-family: Inter;

    position: absolute;
    top: 0px; left: 0px; right: 0px; bottom: 0px;
    width: 100%;
    height: 100%;

    pointer-events: all;
    background-color: #000;

    .difbody
    {
        position: absolute;
        top: 0px; left: 0px; right: 0px; bottom: 0px;
        width: 100%;
        height: 100%;
        flex-direction: row;
        padding: 56px 64px;
    }

    // ── the left column: title, presets, settings ─────────────────────────────

    .difleft
    {
        flex-direction: column;
        width: 580px;
        flex-shrink: 0;
    }

    .diftitle
    {
        font-size: 44px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    // ⚠️ THE PRESETS ARE MAP SELECT'S TABS: an underline carries the choice, not a filled pill
    .diftabs
    {
        flex-direction: row;
        align-items: center;
        flex-shrink: 0;
        margin-top: 8px;

        .diftab
        {
            flex-direction: row;
            align-items: center;
            padding: 8px 0px;
            margin-right: 28px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #6f747c;
            border-bottom: 2px solid rgba( 0, 0, 0, 0 );
            cursor: pointer;

            &:hover { color: #c9cdd4; }

            &.on
            {
                color: #fff;
                border-bottom: 2px solid $gold;
            }

            // ⚠️ A SECTION WITH A SETTING MOVED OFF THE PRESET (2026-10-05): its rows are out of sight, so its tab says so
            .difdot
            {
                width: 6px;
                height: 6px;
                margin-left: 7px;
                border-radius: 3px;
                background-color: $gold;
            }
        }

        // ⚠️ "CUSTOM" BESIDE THE TABS, NOT A FOURTH TAB: it is not something to pick, it is what touching a setting makes
        .difcustom
        {
            padding: 3px 8px;
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: #000;
            background-color: $gold;
        }
    }

    .difhint
    {
        flex-shrink: 0;
        margin-top: 10px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #7d828a;
    }

    // ⚠️ THE SECTIONS' TABS (2026-10-05): the presets' own look, a little below them so the two rows read as two choices
    .diftabs.difsections
    {
        margin-top: 14px;
        margin-bottom: 10px;
    }

    // ⛔ THE LIST SCROLLS; ITS ROWS DO NOT SHRINK (Map select's rule): sixteen rows and four headings are more than the column
    // holds at 1080, and squeezed rows print their labels over each other.
    .diflist
    {
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 1;
        overflow-y: scroll;

        .difrow
        {
            flex-direction: row;
            align-items: center;
            flex-shrink: 0;
            padding: 6px 10px 6px 16px;
            margin-bottom: 4px;
            background-color: #111317;
            border-left: 2px solid #2a2e36;

            .diflabel
            {
                flex-grow: 1;
                font-size: 16px;
                color: #b9bec6;
            }

            .difvalue
            {
                width: 150px;
                font-size: 16px;
                color: #e3e6ea;
                text-align: center;
            }

            .difarrow
            {
                width: 30px;
                height: 30px;
                flex-shrink: 0;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                color: #8d939c;
                background-color: #191c22;
                cursor: pointer;

                &:hover
                {
                    color: #fff;
                    background-color: #262a32;
                }

                // ⚠️ AT THE END OF ITS RANGE: dimmed, and the click does nothing (`Step`)
                &.off
                {
                    color: #33373e;
                    cursor: default;

                    &:hover { background-color: #191c22; }
                }
            }

            &:hover
            {
                background-color: #191c22;
                .diflabel { color: #fff; }
            }

            // ⚠️ "ON" IS THE SETTING DESCRIBED ON THE RIGHT, which stays lit when the cursor leaves the list
            &.on
            {
                background-color: #1f232a;
                border-left: 2px solid $gold;
                .diflabel { color: #fff; }
            }

            // ⚠️ A VALUE MOVED OFF ITS PRESET READS GOLD, so a custom difficulty shows where it differs at a glance
            &.changed .difvalue { color: $gold; }
        }
    }

    .diffoot
    {
        flex-direction: row;
        flex-shrink: 0;
        margin-top: 18px;

        .difbtn
        {
            padding: 10px 18px;
            margin-right: 10px;
            font-size: 15px;
            color: #a3a8b0;
            background-color: #111317;
            border-left: 2px solid #2a2e36;
            cursor: pointer;

            &:hover
            {
                color: #fff;
                background-color: #191c22;
                border-left: 2px solid #5a5f68;
            }
        }
    }

    // ── the setting pointed at, far right ────────────────────────────────────

    .difright
    {
        flex-direction: column;
        flex-shrink: 0;
        width: 600px;
        margin-left: auto;
        justify-content: center;
        align-items: flex-start;
    }

    .difname
    {
        font-size: 52px;
        font-weight: 700;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 14px;
    }

    .difdesc
    {
        width: 600px;
        font-size: 20px;
        color: #c9cdd4;
    }

    // ⚠️ THE THREE PRESETS SIDE BY SIDE: the one it started from has a grey rule, the one the value matches now a gold one
    .difcompare
    {
        flex-direction: row;
        margin-top: 26px;

        .difcol
        {
            flex-direction: column;
            width: 180px;
            padding: 14px 16px;
            margin-right: 10px;
            background-color: #111317;
            border-top: 2px solid #2a2e36;

            .difcolname
            {
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                color: #6f747c;
            }

            .difcolval
            {
                margin-top: 6px;
                font-size: 24px;
                font-weight: 600;
                color: #9ba0a8;
            }

            &.base { border-top: 2px solid #5a5f68; }

            &.match
            {
                border-top: 2px solid $gold;
                .difcolval { color: #fff; }
            }
        }
    }

    .difnow
    {
        margin-top: 18px;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: #c9cdd4;

        &.changed { color: $gold; }
    }

    // ⚠️ A SETTING THE GAMEMODE HAS NOTHING FOR (`DifficultyState.GamemodeNote`), amber under its description
    .difwarn
    {
        width: 600px;
        margin-top: 14px;
        font-size: 16px;
        color: #f0b44c;
    }

    // ⚠️ WHEN THE SETTINGS APPLY: a plain line now the page is wired (it was the amber "not wired yet" warning)
    .difnote
    {
        margin-top: 40px;
        font-size: 13px;
        letter-spacing: 1px;
        color: #8d939c;
    }
}