/* ============================================================
 * BB-EXACT LEVEL-UP screen — the real Battle Brothers level-up reproduced
 * exactly (user 2026-06-15: "copy the Battle Brothers level up exactly ... it
 * should behave and look like a Battle Brothers level up"). Built by
 * progression.js. This adds the parts the Change-Stats port (levelup.css)
 * intentionally omits — the leveled-up sub-header (star + remaining count) and
 * the per-stat talent stars — and restores BB's SINGLE "+N" button slot
 * (levelup.css widened it to a [-][+] pair for Change Stats). Scoped to
 * .popup-dialog.bb-levelup so it never touches the Change-Stats dialog, which
 * shares the .levelup-popup chrome (popup frame / header / footer / progressbar
 * / button-8 skin all come from levelup.css).
 *
 * PROVENANCE: NOT bng-game — ported DIRECTLY from BB vanilla source (under
 * external/bb-vanilla-data/data_001/), every value cited inline below. Images
 * leveled_up.png + talent_<n>.png are vendored into static/levelup/ (they live
 * in BB gfx/, not the shared bb-data repo) — same vendoring note as levelup.css.
 * ============================================================ */

/* --- merc-summary header: BB leveled-up state (star badge + clickable bar) --
 * When a level-up is pending BB shows a star on the level badge and turns the XP
 * bar into "Click here to level up!" (header_module.js setLevel/setXP). These
 * reproduce that exactly. */

/* BB: character_screen_left_panel_header_module.css L159-168 — the leveled_up
 * star inside the level badge. */
.character-screen .left-panel-header-module .level-container > img
{
    top:      0;
    right:    -0.2rem;
    bottom:   0;
    width:    2.0rem;
    height:   2.0rem;
    position: absolute;
    margin:   auto;
}

/* BB toggles the star with display-none (header_module.js setLevel). */
.character-screen .display-none { display: none; }

/* (The clickable XP bar gets BB's "Click here to level up!" label here AND our
 * blue marker — .l-xp-center-container.is-clickable — styled in editable.css.) */


/* BB: ui/controls/popup_dialog.css L151-160 — sub-header band below the title. */
.character-screen .ui-control.popup-dialog.bb-levelup > .sub-header
{
    width:    100%;
    position: relative;
    float:    left;

    overflow: hidden;
}

/* BB: character_screen_left_panel_header_module.css L321-326 — the levelup
 * sub-header row (the "leveled up" line: star + N / 3 stat points). */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-header
{
    width:    100%;
    height:   3.0rem;
    position: relative;
}

/* BB: header_module.css L328-338 — 8rem holder, centered, for star + count. */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-header .l-center-container
{
    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    8.0rem;
    height:   3.0rem;
    position: absolute;
    margin:   auto;
}

/* BB: header_module.css L340-349 — the leveled_up star icon (3rem, at left). */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-header .l-center-container > img
{
    top:      -0.1rem;
    left:     0;
    bottom:   0;
    width:    3.0rem;
    height:   3.0rem;
    position: absolute;
    margin:   auto;
}

/* BB: header_module.css L351-362 — the "remaining / max" stat-points count. */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-header .l-center-container > .label
{
    top:      0;
    left:     4.0rem;
    bottom:   0;
    width:    4.0rem;
    height:   3.0rem;
    position: absolute;
    margin:   auto;

    line-height: 3.0rem;
}

/* BB: header_module.css L401-411 — the talent stars overlaid on each stat row
 * (talent_<0..3>.png), upper-right of the stat icon. */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-container .row .talent
{
    top:      -1.3rem;
    left:     3.7rem;
    position: absolute;
    z-index:  20;

    width:    3.6rem;
    height:   1.8rem;
}

/* BB: header_module.css L424-432 — the SINGLE +N button slot (4.2rem @ 17.6rem).
 * Overrides levelup.css, which widens this to 4.6rem @ 17.2rem for the
 * Change-Stats [-][+] pair. */
.character-screen .ui-control.popup-dialog.bb-levelup .levelup-container .row > .l-increase-button-container
{
    top:      0.1rem;
    left:     17.6rem;
    bottom:   0;
    width:    4.2rem;
    height:   2.8rem;
    position: absolute;
    margin:   auto;
}

/* The single button fills the 4.2rem slot — BB's button-8 lvl_up sprite is
 * 4.2x2.8 native (button.css L858-930); levelup.css narrows it to 2.15rem for
 * the pair, so restore full width + native sprite size here. */
.character-screen .ui-control.popup-dialog.bb-levelup .l-increase-button-container .ui-control.button-8,
.character-screen .ui-control.popup-dialog.bb-levelup .l-increase-button-container .ui-control.button-8:hover,
.character-screen .ui-control.popup-dialog.bb-levelup .l-increase-button-container .ui-control.button-8.is-selected,
.character-screen .ui-control.popup-dialog.bb-levelup .l-increase-button-container .ui-control.button-8[disabled]
{
    width:           100%;
    background-size:  4.2rem 2.8rem;
}


/* --- Additional Perk Points stepper (this project's editor chrome, NOT a BB
 *     screen port — there is no BB equivalent; it manages perk points beyond the
 *     level grant). Reuses the .confirm-popup parchment frame + .button-8 sprite
 *     buttons; this block only lays out the info text + the -/N/+ stepper. */
.character-screen .ui-control.popup-dialog.additional-pp-popup > .content.additional-pp-content
{
    height:          auto;
    flex-direction:  column;
    gap:             2.0rem;
    padding:         2.0rem 4.0rem;
}
.additional-pp-info
{
    color:       #d6c7a8;
    /* CANONICAL DIALOG BODY TEXT SIZE = 1.6rem, 2.2rem line-height — the Level-Up
     * confirm explainer (levelup.css .confirm-content). EVERY body text inside a
     * popup dialog uses this so all dialogs read at the same size. */
    font-size:   1.6rem;
    line-height: 2.2rem;
    text-align:  center;
}
.additional-pp-stepper
{
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             2.4rem;
}
.additional-pp-stepper .ui-control.button-8
{
    width:  4.2rem;
    height: 2.8rem;
}
.additional-pp-count
{
    min-width:   4.0rem;
    text-align:  center;
    font-size:   2.6rem;
    color:       #e8d9b5;
}


/* --- confirm dialog with a "Don't ask me again" checkbox (editor chrome) ----
 * Stack the message above the checkbox; .confirm-content is otherwise a single
 * centred line (levelup.css). The checkbox row is left of its label. */
.character-screen .ui-control.popup-dialog.confirm-popup > .content.confirm-content.has-checkbox
{
    flex-direction: column;
    gap:            1.6rem;
}
.confirm-checkbox
{
    display:     flex;
    align-items: center;
    gap:         0.8rem;
    cursor:      pointer;
    color:       #d6c7a8;
    font-size:   1.6rem;   /* canonical dialog body size (see .additional-pp-info) */
}
.confirm-checkbox input
{
    width:   1.6rem;
    height:  1.6rem;
    cursor:  pointer;
}


/* The Additional Perk Points dialog carries more text than the small confirm
 * popups, so give it a bigger frame (confirm-popup is 52x24rem). */
.character-screen .ui-control.popup-dialog.confirm-popup.additional-pp-popup
{
    width:  60.0rem;
    height: 36.0rem;
}