// ROOM NAME
//
// Top left: the name of the part of the map you are in. The HUD's own side margin (40px, as `.hud .left`), a gold rule down
// its left edge so it reads as a place rather than a message, and a hard shadow so it holds over a bright wall.

root
{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;          // never eat clicks
}

.room
{
    position: absolute;
    top: 34px;
    left: 40px;                    // where the entrance slides it to (inline, as it plays)

    padding-left: 12px;
    border-left: 3px solid rgba( 235, 200, 100, 0.9 );

    font-family: Inter;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba( 255, 245, 230, 0.95 );
    text-shadow: 0px 2px 6px rgba( 0, 0, 0, 0.95 );
    white-space: nowrap;
}

// ═══ BASALT (`HudTheme`) — a diamond either side of the name, in the map's face ══════════════════════════════════════════
//
// ⛔ THE CARVED PLAQUE BEHIND IT IS GONE (2026-09-27) — *"the background for the hud elements take too much space so i want to
// remove them"*. The diamonds stay: they are accents, not a backing.
//
// ⛔ THE NAME SITS WHERE IT ALWAYS HAS, because nothing here takes room: the diamonds are absolutely positioned children, and
// the gold rule keeps its 3px, only turned clear. Their insets are from the name's own box — the padding box, 3px in from the
// slide's `left` — so they follow the name as it slides in and as it grows: the leading diamond 10px before the name (its
// 6px, from -4px); the trailing one 10px after the last glyph, which is 5px in from the box's end, the letter-spacing's own
// trailing 5px.

$stone: rgba( 46, 42, 37, 0.9 );
$stone-hi: rgba( 92, 83, 72, 1 );
$stone-lo: rgba( 17, 14, 11, 1 );
$groove: rgba( 15, 12, 9, 0.95 );
$groove-lip: rgba( 96, 86, 74, 1 );
$bone: rgba( 228, 217, 195, 1 );
$bone-dim: rgba( 160, 148, 130, 1 );
$ember: rgba( 222, 108, 46, 1 );
$ember-hot: rgba( 248, 150, 72, 1 );
$lite: rgba( 234, 246, 255, 1 );

.theme-basalt .room
{
    border-left-color: rgba( 0, 0, 0, 0 );
    color: $bone;
    letter-spacing: 5px;

    // the map's face, on Inter's line box so the name keeps its height (see `.round` in SurvivalHud.razor.scss)
    font-family: Cinzel;
    line-height: 0.898;

    .orn
    {
        position: absolute;
        top: 50%;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        background-color: $bone-dim;
        transform: rotate( 45deg );
    }

    .orn.a { left: -4px; }
    .orn.b { right: -11px; }
}

// ═══ THE FIRST VISIT'S SUBTITLE (2026-09-27) ═════════════════════════════════════════════════════════════════════════════════
//
// Under the name on each player's first visit to the room this game (`RoomNameHud`, `RoomNames.NoteShown`), sliding with it
// (its `left` inline, as the name's) and in a box of its own, so the name's does not grow. ⚠️ ITS TEXT STARTS WHERE THE NAME'S
// DOES: the name's 12px padding and 3px rule, as padding. The top is the name's 34px, its 24px line on Inter's box (29px), and
// 5px between.
.subtitle
{
    position: absolute;
    top: 68px;
    left: 40px;
    padding-left: 15px;

    font-family: Inter;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba( 235, 225, 205, 0.85 );
    text-shadow: 0px 2px 5px rgba( 0, 0, 0, 0.95 );
    white-space: nowrap;
}

// basalt: bone, in the map's face on Inter's line box (0.898 — see `.round` in SurvivalHud.razor.scss)
.theme-basalt .subtitle
{
    font-family: Cinzel;
    line-height: 0.898;
    letter-spacing: 3px;
    color: $bone-dim;
}