/*
 * lonewolf.css - layout for the /<seed>/<origin> brother viewer: world map on the
 * left, the origin's starting company (paperdoll + stats) on the right. Self-
 * contained (does NOT reuse the map page's style.css) so this view is independent
 * of files other work owns.
 */

/* rem base for the copied BB character-screen modules (they measure everything in
 * rem). Fixed at 10px = BB-native (ui/fonts.css 62.5% root); the map side below
 * uses px / vh, never rem, so it is unaffected by this. */
html { font-size: 10px; }

* { box-sizing: border-box; }
body { margin: 0; font: 1.4rem/1.4 system-ui, sans-serif; color: #eae4d8; background: #12100e; }
a { color: #6fb2ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #8a8375; }

.topbar { padding: .6rem 1.2rem 0; }
.titlebar { display: flex; align-items: center; gap: 1rem; }
/* "Battle Brothers Seed" matches bloodngold.com's h1 (gold #c9a227, system font,
 * normal weight); the seed span keeps its own copyable Cinzel style below. */
.topbar h1 { font-size: 1.9rem; font-weight: normal; color: #c9a227; margin: .1rem 0 .5rem; }
.topbar h1 .seed { font-family: 'Cinzel-Bold', serif; color: #dda21f; }

/* small "Copy" button next to the title (copies the seed) */
.copy-btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
   padding: .3rem .7rem; font-size: 1.2rem; color: #cbbcae;
   background: #201c17; border: 1px solid #4a4034; border-radius: 4px; }
.copy-btn:hover { border-color: #7a6a4e; color: #ffdd88; }
.copy-btn svg { display: block; }

/* two columns (map left, brothers right); wraps on narrow windows */
.page { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap;
        padding: 0 1.2rem 1.2rem; }

/* --- LEFT: map. Sized EXACTLY like the standalone /<seed> page so the map fills
       the box identically (same box aspect -> same render, no extra letterbox). - */
.map-col { flex: 0 0 auto; }
#status { font-size: 1.3rem; padding: .2rem 0; }
/* Box size is a CONSTANT: every map is 140x170, so the cropped aspect ratio is fixed
   (map.js cropBounds: cropW/cropH = (180*137)/(120*167) = 24660/20040 = 1.230539). Setting it here
   in CSS makes the box its final size on FIRST PAINT (before the async map fetch/JS runs), so it
   never resizes when the map appears. Formula matches the old map.js sizeViewport:
   w = min(72vw, 1100px, 84vh*ar), h = w/ar. */
#viewport { --map-ar: 1.230539; aspect-ratio: var(--map-ar);
            width: min(72vw, 1100px, calc(84vh * var(--map-ar))); height: auto; max-height: 84vh;
            overflow: hidden; position: relative;
            /* BB map letterbox (matches the plain map page). */
            background: #16323f; border: 1px solid #3a3a3a; border-radius: 3px; }
#map { transform-origin: 0 0; will-change: transform; image-rendering: auto; }

/* --- RIGHT: brothers panel (narrower, fixed) ------------------------------- */
.brothers-col { flex: 0 0 37rem; width: 37rem; overflow-y: auto; }

/* origin header: reads like a (currently non-interactive) select field showing
 * the BB origin icon + its name. */
.origin-header { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem;
   background: #201c17; border: 1px solid #4a4034; border-radius: 4px; }
.origin-header img { width: 4.8rem; height: 4.8rem; flex: none;
   border: 1px solid #4a4034; border-radius: 3px; background: #000; object-fit: cover; }
.origin-header .name { font-family: 'Cinzel-Bold', serif; font-size: 2rem; color: #dda21f; line-height: 1.1; }
.origin-header .role { font-size: 1.2rem; color: #8a8375; }

/* small section headings between the selector / traits / stats */
.section-label { font-family: 'Cinzel-Bold', serif; font-size: 1.5rem; color: #c9b482;
   margin: 1.4rem 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid #3a332a; }

/* brothers selector: up to 3 selectable tiles (first selected by default) */
.bros-selector { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.bro-tile { flex: 1 1 0; min-width: 9rem; padding: 1rem .6rem; cursor: pointer;
   font: 600 1.4rem/1 'Cinzel-Bold', serif; color: #cbbcae;
   background: #201c17; border: 1px solid #4a4034; border-radius: 4px; }
.bro-tile:hover { border-color: #7a6a4e; }
.bro-tile.is-selected { background: #33291c; border-color: #dda21f; color: #ffdd88; }

/* traits list: BB trait icon + name (description on hover) */
.bros-traits { display: flex; flex-direction: column; gap: .4rem; }
.trait { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem;
   background: #1b1813; border: 1px solid #35301f; border-radius: 3px; }
.trait img { width: 3rem; height: 3rem; flex: none; }
.trait-name { font-size: 1.4rem; color: #e6dcc4; }
.traits-empty { font-size: 1.3rem; color: #8a8375; font-style: italic; padding: .3rem 0; }

/* the BB character panel holding just the stats module */
.character-screen-container.brothers-panel { position: relative; width: 34rem; margin: .2rem auto 0; }

/* Stack override: bng-game pins the stats block absolute-bottom at 32.5% of a
 * full-height left panel. This standalone panel holds only the stats module, so
 * flow it in place and widen each row to 25% (2 columns x 4 rows) - BB's 12.2%
 * was tuned for 8 rows/column, but the defs are trimmed to the 8 rolled attributes. */
.character-screen-container.brothers-panel .stats-module {
   position: relative; bottom: auto; height: 16rem; margin-top: 0; }
.character-screen-container.brothers-panel .stats-module .stats-row { height: 25%; }

/* World facts under the "World Map" heading: total ports + arena-port city (map.js mapFacts). App
   chrome, not a BB map element, so no BB citation. Sized up so the facts read clearly. */
.map-facts { list-style: none; padding: 0; margin: .3rem 0 0; font-size: 1.5rem; }
.map-facts li { margin: .5rem 0; }
.map-facts .fact .mark { font-weight: 700; }
.map-facts .fact.yes .mark { color: #2e9e3f; }
.map-facts .fact.no .mark { color: #c0392b; }

/* Footer, same style as bloodngold.com (.site-footer, bng-home/webapp/static/style.css). */
.site-footer { text-align: center; padding: 2rem 1.2rem 1.2rem; font-size: 1.2rem; color: #666; }
.site-footer .disclaimer { margin-bottom: .3rem; }
.site-footer a { color: #666; text-decoration: none; }
.site-footer a:hover { color: #c9a227; }