// ⚠️ STYLED BY CLASS, NOT BY A BARE `root` SELECTOR.
//
// This file used `root { … }`, which every other panel here avoids — they all
// put a class on <root> and style that (.lobby, .hud, .devmenu). The rule never
// applied, so `pointer-events: none` did nothing and a full-screen interactive
// panel sat over the lobby swallowing every click.

.use-prompt
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    // Never eat clicks. Nothing in here is interactive — it is a caption.
    pointer-events: none;

    .prompt
    {
        // ⚠️ POSITIONED WITH `bottom`, NOT PADDING.
        //
        // cl_target.lua draws at `sch - 280*pscale` — ~26% up from the bottom at
        // the 1080p it was written against. Two wrong turns getting here:
        //   1. Copying the literal 280px put the prompt at the TOP of a 392px
        //      editor viewport, because 280 of 392 is most of the screen.
        //   2. `padding-bottom: 26%` did not fix it — percentage padding
        //      resolves against the container's WIDTH, not its height.
        // `bottom` resolves against height, which is the axis we actually mean.
        position: absolute;
        bottom: 26%;
        left: 0px;
        width: 100%;

        align-items: center;
        justify-content: center;
        flex-direction: row;

        pointer-events: none;

        // ⚠️ Inter, not Poppins. DevMenu.razor.scss already carries this warning:
        // Poppins appears in ~60 shipped .scss files but has no font file in the
        // s&box install, and a missing font renders every label as a grey block.
        font-family: Inter;
        font-size: 22px;
        font-weight: 500;
        color: white;

        text-shadow: 0px 2px 4px rgba( 0, 0, 0, 0.9 );

        .box
        {
            background-color: rgba( 0, 0, 0, 0.45 );
            padding: 6px 18px;
            border-radius: 3px;
            pointer-events: none;
        }
    }

    // A refusal is not an offer — "you must turn on the electricity first"
    // should not look like something you can press E on.
    .prompt.refusal .box
    {
        color: #ffcf5c;
    }
}

// ═══ BASALT (`HudTheme`) — the map's face, Cinzel on the prompt ═══
//
// *"i want the font for this map to affect … all hud messages that appear on screen"* (2026-09-27). This panel sits inside the survival HUD, whose
// root wears the theme's class; its prompt names Inter itself, so it is named here.
// ⛔ ON INTER'S LINE BOX, so no row grows taller: 0.898 of Cinzel's own line, which is Inter's 1.211 of the size. See
// `.round` in SurvivalHud.razor.scss for why it is not 1.211. It is wider on mixed-case text, which it sets in small capitals. Cinzel-Bold is the one face shipped,
// so every weight draws bold.
.theme-basalt .use-prompt .prompt
{
    font-family: Cinzel;
    line-height: 0.898;
}