/* ============================================================
 * COPIED VERBATIM from bng-game: client/inventory/inventory.css
 * WHY: BB character-screen scaffold — parchment frame, container, left/right columns, and the rem font-scale that sizes the whole screen. The thing that makes it LOOK like BB.
 * NOT copied: that module's JS — this project renders the same DOM
 *   server-side (Jinja), so no bng-game JS runs here.
 * bng-game's own header + its BB-source citations are kept below.
 * ============================================================ */

/*
 * bng-game/webapp/inventory/inventory.css
 *
 * Top-level scaffold for the BB tactical-battle character/inventory screen.
 * Per-module CSS lives under inventory/modules/*_module.css.
 *
 * Recreated from BB vanilla source (under external/bb-vanilla-data/data_001/):
 *   ui/screens/character/character_screen.css
 *     (.character-screen, .character-screen-statuetes,
 *      .character-screen-container, .l-left-content-container,
 *      .l-right-content-container)
 *   ui/fonts.css                  (font utility classes)
 *   ui/colors.css                 (font color utility classes)
 *
 * coui://gfx/... paths rewritten to /bb/images/... (served by Flask).
 */

/* BB: ui/screens/character/character_screen.css */
/* BB: ui/controls/dialog.css */
/* BB: ui/fonts.css */
/* BB: ui/colors.css */

/* --- BB base ----------------------------------------------------------- */
/* Root font-size is the foundation of every BB measurement: every
 * dimension in the BB CSS (142.1rem parchment, 7.1rem brother slot,
 * 5.0rem perk cell, etc.) is in rem. BB ships with `font-size: 62.5%`
 * (= 10px per rem at the 16px browser default), giving the parchment
 * its native 1421x906 px size — fits a 1280x720+ BB game window but
 * overflows smaller browser viewports.
 *
 * Viewport-fit: shrink 1rem proportionally so the 142.1rem x 90.6rem
 * parchment always fits, but never exceed BB-native (10px) so pixel
 * art doesn't get upscaled on large displays. Uses CSS min() so the
 * value updates live on resize, no JS needed.
 *
 *   100vw / 142.1   the rem size at which the parchment exactly
 *                   fills the viewport width.
 *   100vh /  90.6   ... or the height.
 *   10px            BB-native ceiling.
 *
 * Reference: character_screen.css L29-51 (.character-screen-statuetes
 * 142.1rem x 90.6rem) and the 62.5% root the BB game window uses.
 *
 * Bottom-gap (user request 2026-06-15): when the viewport is HEIGHT-constrained
 * the parchment would fill 100vh exactly and sit flush against the browser's
 * bottom edge. Budget the height term to (100vh - 20px) instead, so the
 * margin:auto-centered parchment leaves ~10px clear top and bottom. Still fits
 * one screen (no scroll); width-constrained viewports already have vertical
 * slack so the cap never bites there. */
html
{
    font-size: min(calc(100vw / 142.1), calc((100vh - 20px) / 90.6), 10px);
}

html,
body
{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
}

body
{
    background: #1a1814;
}


/* @font-face declarations live in /common/fonts.css. Every page that
 * includes inventory.css also includes common/fonts.css. */


/* --- BB font utility classes ------------------------------------------ */
/* Source: ui/fonts.css. Subset used by the character-screen modules. */
.title-font-very-small,
.title-font-small,
.title-font-normal,
.title-font-big,
.title-font-very-big
{
    font-weight: normal;
    font-size:   1.2rem;
    font-style:  normal;
    font-family: 'Cinzel-Bold', monospace;
}

.title-font-normal   { font-size: 1.8rem; }
.title-font-big      { font-size: 2.2rem; }
.title-font-very-big { font-size: 2.8rem; }

.text-font-very-small,
.text-font-small,
.text-font-medium,
.text-font-normal,
.text-font-big
{
    font-weight: normal;
    font-size:   1.2rem;
    font-style:  normal;
    font-family: 'FreeUniversal-Regular';
}

/* BB-cited values from data_001/ui/fonts.css L131-167. See parallel
 * comment in bottombar.css — same off-by-one scale was here too. */
.text-font-very-small { font-size: 1.2rem; }   /* BB fonts.css:139 (block default) */
.text-font-small      { font-size: 1.4rem; }   /* BB fonts.css:146 */
.text-font-medium     { font-size: 1.6rem; }   /* BB fonts.css:151 */
.text-font-normal     { font-size: 1.8rem; }   /* BB fonts.css:156 */
.text-font-big        { font-size: 2.2rem; }   /* BB fonts.css:161 */
.text-font-very-big   { font-size: 2.8rem; }   /* BB fonts.css:166 */

.font-bold           { font-weight: bold !important; }
.font-bottom-shadow  { text-shadow: 1px 1px 1px #000; }


/* --- BB color utility classes ----------------------------------------- */
/* Source: ui/colors.css. Subset used by the character-screen modules. */
.font-color-brother-name
{
    color: #dda21f !important;
}

/* Source: ui/colors.css L77-80 — .font-color-value is the gold/orange
 * accent BB uses for numeric values (level badge, stat values, etc.).
 * Same hex as font-color-brother-name. */
.font-color-value
{
    color: #dda21f !important;
}

.font-color-progressbar-label
{
    color: #c6c6c6;
    text-shadow: 1px 1px 1px #000;
}


/* --- BB modal-dialog backdrop ----------------------------------------- */
/* Source: ui/controls/dialog.css L15-27 — .ui-control.dialog-modal-background.
 * 30%-black overlay sized to the viewport. BB's character_screen.js L86
 * adds this class to .character-screen so the backdrop renders behind
 * the parchment when the screen is opened over a tactical battle. */
.ui-control.dialog-modal-background
{
    background-color: rgba(0, 0, 0, 0.3);

    top:      0;
    left:     0;
    right:    0;
    bottom:   0;
    width:    100%;
    height:   100%;
    position: absolute;
    z-index:  1;
}


/* --- character-screen root -------------------------------------------- */
/* Source: character_screen.css L12-21 — .character-screen.
 * Cursor: BB sets the global cursor to Cursor.Hand at character-screen
 * creation (scripts/ui/global/cursor.nut L80-85 setCursor(Hand)) and
 * never changes it during inventory drag — drag uses the same
 * cursor_hand.png from start to drop. The CSS rule sets it on the
 * scaffold root so every descendant inherits it; the drag wiring in
 * paperdoll_module / inventory_list_module never overrides cursor
 * (no .is-dragged or .is-drop-target cursor rule). */
/* BB: unpacked_brushes/ui/cursors/cursor_hand.png */
.character-screen
{
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    position: absolute;

    overflow: hidden;

    cursor: url("/bb/images/ui/cursors/cursor_hand.png"), default;
}

/* Source: character_screen.css L29-51 — .character-screen .character-screen-statuetes
 * (parchment background frame, 142.1rem x 90.6rem). */
.character-screen .character-screen-statuetes
{
    width:   142.1rem;
    height:   90.6rem;

    left:    0;
    right:   0;
    top:     0;
    bottom:  0;

    position: absolute;
    z-index:  2;
    margin:   auto;

    background-image:  url("/bb/images/ui/inventory/background_inventory.png");
    background-size:   142.1rem 90.6rem;
    background-repeat: no-repeat;
}

/* Source: character_screen.css L54-75 — .character-screen-container.
 * 103.9rem x 78.2rem inset inside the parchment frame at 20.9rem / 12.5rem. */
.character-screen .character-screen-container
{
    left:    20.9rem;
    top:     12.5rem;
    right:   17.6rem;

    width:   103.9rem;
    height:   78.2rem;

    position: absolute;
}

/* Source: character_screen.css L80-85 — border-box inside the container. */
.character-screen .character-screen-container *
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

/* Source: character_screen.css L87-96 — .l-left-content-container.
 * 34.0rem wide column on the left, full container height. */
.character-screen .character-screen-container .l-left-content-container
{
    top:      0;
    left:     0;
    bottom:   0;
    width:    34.0rem;
    position: absolute;
}

/* Source: character_screen.css L98-107 — .l-right-content-container.
 * Fills the rest of the container (everything to the right of the left col). */
.character-screen .character-screen-container .l-right-content-container
{
    top:      0;
    left:     34.0rem;
    right:    0;
    bottom:   0;
    position: absolute;
}


/* === BB scrollbar ====================================================
 * The BB scrollbar is NOT styled here anymore. BB uses the aciScrollBar
 * jQuery plugin, which draws its own DOM with a FIXED 32px grip positioned
 * by scroll fraction — the native ::-webkit-scrollbar (what used to live
 * here) sizes its grip by content ratio and so can't reproduce that (it
 * either stretches or never reaches the track ends). The faithful port is
 * static/inventory/scrollbar.css + scrollbar.js. */