/* Part 6 of 7 of the game's stylesheet (was style.css; the parts load in order, so rule
   order is exactly as before). Mostly: Hero detail popups, Chronicle hooks, Ancestral Altar, character selection, skill tree, Compendium, badges. */

/* ==========================================================================
   THE SECRET SAUCE: COMPACT COMPONENT DESIGNS FOR SPARE POCKETS
   ========================================================================== */
.obc-compact-spare-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.obc-compact-card {
    background: #1e212c;
    border: 1px solid #2d313f;
    border-radius: 4px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.obc-compact-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.obc-mini-portrait {
    width: 32px;
    height: 32px;
    background: #14161d;
    border: 1px solid #2d313f;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.obc-mini-portrait img { width: 100%; height: 100%; object-fit: contain; }

.obc-compact-meta { min-width: 0; }
.obc-compact-name {
    font-size: 0.78rem;
    font-weight: bold;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.obc-compact-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Micro Mini Utility Controls for Spare items */
.obc-mini-btn {
    padding: 4px 8px;
    font-size: 0.65rem;
    font-weight: 900;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}
.obc-mini-btn.swap { background: #3d4357; color: #fff; }
.obc-mini-btn.scrap { background: #3d2424; color: #fca5a5; }

/* Empty Slots */

/* Unique Loot Modal Overrides */
.obc-loot-new-discovery {
    border: 1px solid var(--gold-amber) !important; /* Golden discovery border */
    background: linear-gradient(135deg, #2c281e 0%, #1e1b14 100%) !important;
    box-shadow: inset 0 0 12px rgba(var(--gold-amber-rgb), 0.15), 
                0 4px 15px rgba(0, 0, 0, 0.4);
}

.obc-loot-new-discovery .obc-slot-tag {
    color: var(--gold-amber);
    font-weight: 800;
}

/* Premium Action Buttons inside the row blocks */
.obc-loot-btn-action {
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #3d4357;
    background: #232733;
    color: #e2e8f0;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
    flex-shrink: 0;
}

.obc-loot-btn-action:hover {
    background: #313749;
    border-color: #4e5670;
}

/* Scrap Modification color overrides */
.obc-loot-btn-action.scrap-loot {
    border-color: #a63e3e;
    color: #ff6b6b;
    background: rgba(166, 62, 62, 0.1);
}
.obc-loot-btn-action.scrap-loot:hover {
    background: #a63e3e;
    color: #fff;
}

/* Equip Confirmation modifications */
.obc-loot-btn-action.equip-loot {
    border-color: var(--gold-amber);
    color: var(--gold-amber);
    background: rgba(var(--gold-amber-rgb), 0.05);
}
.obc-loot-btn-action.equip-loot:hover {
    background: var(--gold-amber);
    color: #000;
}

/* --- Chronicle Structure Hooks --- */
.chronicle-screen {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px;
}

.chronicle-header { text-align: center; margin-bottom: 25px; }
.chronicle-title { font-family: var(--font-head); color: var(--blood); text-transform: uppercase; margin: 0; font-size: 1.5rem; }
.chronicle-lore { font-family: 'Crimson Pro', serif; font-size: 1.1rem; color: #eee; line-height: 1.5; font-style: italic; max-width: 450px; margin: 0 auto;
                text-align: center; font-family: var(--font-body); padding: 10px; background: rgba(62, 39, 35, 0.03); border-radius: 4px;
}

.chronicle-banner-img {
    width: 100%; height: 180px; object-fit: cover; object-position: center 20%;
    border-radius: 6px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px; border: 1px solid rgba(0, 0, 0, 0.2);
}

/* --- Ancestral Altar --- */
.ancestral-altar {
    background: #fffdf5; border: 2px solid var(--ink); border-radius: 4px; border-top-right-radius: 0px; border-top-left-radius: 0px; padding: 15px;
    box-shadow: inset 0 0 10px rgba(62, 39, 35, 0.05);
}
.altar-header { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
.amulet-badge-container { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.gen-badge {
    position: absolute; bottom: -4px; right: -4px; background: var(--ink); color: var(--parchment);
    font-size: 10px; font-weight: 900; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--parchment);
}
.amulet-title { font-size: 11px; color: var(--blood); text-transform: uppercase; font-weight: bold; margin: 0; letter-spacing: 1px; }

.altar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-shrine {
    background: rgba(62, 39, 35, 0.04); padding: 8px; border-radius: 3px;
    text-align: center; border: 1px solid rgba(62, 39, 35, 0.08); display: flex; flex-direction: column;
}
.shrine-label { font-size: 8px; color: var(--blood); text-transform: uppercase; font-weight: bold; }
.shrine-value { font-size: 14px; color: var(--blood-dark); font-weight: 800; margin-top: 2px; }
.shrine-locked { background: transparent; border: 1px dashed #d7ccc8; }
.shrine-label-locked { font-size: 8px; color: #9e9e9e; text-transform: uppercase; }
.shrine-value-locked { font-size: 11px; color: #bdbdbd; font-weight: bold; }

/* --- Character Selection Layout --- */
.section-heading { font-family: var(--font-head); color: #eee; text-align: center; margin: 0; font-size: 18px; letter-spacing: 1px; }
.section-subtext { text-align: center; font-size: 13px; color: #eee; margin: 5px auto 20px; max-width: 500px; }

.hero-selection-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px;
}
/* ==========================================================================
   --- Hero Selection Cards & Grid Layout ---
   ========================================================================== */
.hero-card {
    border: 2px solid var(--ink); 
    border-radius: 6px; 
    background: var(--parchment);
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-card-active { 
    cursor: pointer; 
}

.hero-card-active:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(62,39,35,0.15); 
}

.hero-portrait-frame {
    height: 160px; /* Increased frame height to let full-body art shine */
    position: relative;
    background: #111; /* Dark background masks transitions seamlessly */
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--ink);
    overflow: hidden;
    
}

/* Forces grid portraits to cover layout container natively */
.full-bleed-portrait,
.full-bleed-portrait img,
.full-bleed-portrait svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; /* Locks on head and shoulder focus */
    display: block;
}

/* 
   New Summary Bar Structural Alignment: 
   Positions attribute badges safely to the left, names gracefully to the right.
*/
.hero-summary-bar {
    padding: 8px 12px; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    background: rgba(255,255,255,0.15);
}

.hero-main-stat { 
    font-size: 10px; 
    font-weight: 900; 
    padding: 3px 6px; 
    border-radius: 4px; 
    color: #fff; 
    text-align: center;
    min-width: 32px;
    flex-shrink: 0; /* Prevents badge layout collapse on narrow mobile displays */
    position: absolute;
    top:10px;
    left:10px;
}

.hero-name { 
    margin: 0; 
    font-family: var(--font-head); 
    font-size: 14px; 
    color: var(--blood-dark); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Gracefully truncates massive custom text names */
    flex-grow: 1;
}

/* Dynamic Archetype Accent Mapping */
.stat-str .hero-main-stat { background: var(--blood); }
.stat-mag .hero-main-stat { background: #4527a0; }
.stat-dex .hero-main-stat { background: #01579b; }
.stat-def .hero-main-stat { background: #1b5e20; }

.stat-str { background: linear-gradient(to top, rgba(128,0,0,0.05), var(--parchment)); }
.stat-mag { background: linear-gradient(to top, rgba(69,39,160,0.05), var(--parchment)); }
.stat-dex { background: linear-gradient(to top, rgba(1,87,155,0.05), var(--parchment)); }
.stat-def { background: linear-gradient(to top, rgba(27,94,32,0.05), var(--parchment)); }

/* Locked States */
.hero-card-locked {
    background: #dcd1b3; 
    opacity: 0.65; 
    align-items: center; 
    justify-content: center; 
    padding: 25px 10px; 
    text-align: center;
}
.lock-icon-wrapper { width: 32px; height: 32px; margin-bottom: 8px; filter: grayscale(1) contrast(1.2); }
.lock-info { display: flex; flex-direction: column; gap: 2px; }
.lock-title { font-family: var(--font-head); font-size: 12px; color: var(--ink); text-transform: uppercase; font-weight: bold; letter-spacing: 1px; }
.lock-hint { font-size: 9px; color: var(--blood); font-style: italic; }


/* ==========================================================================
   --- Overlay & Detail Modal System (Ref: 55411.jpg / 55413.jpg) ---
   ========================================================================== */
.hero-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 9999;
}
.hero-modal-overlay.active { opacity: 1; pointer-events: auto; }

.hero-popup-box {
    width: 95%;
    max-width: 560px; /* Expanded slightly to handle the side portrait elegantly */
    background: var(--parchment);
    border: 3px solid var(--ink);
    border-radius: 8px;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}
.hero-modal-overlay.active .hero-popup-box { transform: scale(1); }

.close-popup-btn {
    position: absolute; top: 12px; right: 14px; background: rgba(9,9,9, 0.2); border: 1px solid gray;
    font-size: 18px; color: var(--ink); cursor: pointer; font-weight: bold; z-index: 10;
}
.close-popup-btn:hover { color: var(--blood); }

/* 2-Column Side-by-Side Flex Split Layout */
.popup-split-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: stretch; /* Forces left portrait matching height automatically */
}

/* Cinematic Full-Height Left Vertical Banner Panel */
.popup-left-banner {
    width: 145px;
    flex-shrink: 0;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: #111;
    overflow: hidden;
    display: flex;
}
.popup-left-banner img,
.popup-left-banner svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
}

/* Right Content Column Layout Stack */
.popup-right-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    
    background-color: #fcf5e7; /* Contrast card color */
    border: 1px solid #dcd1bd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    width: 100%;
    box-sizing: border-box;
}

.popup-body-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    font-family: 'Crimson Pro', serif; 
    color: var(--ink);
}

/* Fixes top-right overflow layout breaking */
.popup-hero-header { 
    margin-bottom: 14px; 
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.popup-title { 
    font-family: var(--font-head); 
    font-size: 24px; 
    color: var(--blood-dark); 
    margin: 0; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    text-align: left;
}

/* Safe stack system for primary badge + difficulty tag labels */
.popup-subtitle-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.popup-specialist-text {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #795548; /* High-contrast earthy text variant */
}

.popup-meta-tags { 
    display: flex; 
    gap: 4px; 
    flex-wrap: wrap; 
}

.tag-badge {
    font-size: 8px; 
    padding: 2px 6px; 
    background: rgba(62, 39, 35, 0.06);
    border-radius: 3px; 
    color: var(--ink); 
    border: 1px solid rgba(62, 39, 35, 0.15); 
    font-weight: bold;
    white-space: nowrap;
}
.badge-complexity { 
    background: rgba(230,81,0,0.08); 
    color: #e65100; 
    border-color: rgba(230,81,0,0.2); 
}

.popup-desc { 
    font-style: italic; 
    font-size: 0.75rem; 
    line-height: 1.3; 
    margin: 0;
    text-align: center;
}

/* Skills Content Engine Block */
.popup-skills-list { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    margin-top: auto; /* Securely forces abilities array down to the base */
}

.skill-row {
    background: rgba(0,0,0,0.03); 
    padding: 8px 12px; 
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05); 
    display: flex; 
    flex-direction: column; 
    gap: 2px;
}
.skill-label { font-size: 10px; font-weight: bold; text-transform: uppercase; color: var(--ink); }
.skill-value { font-size: 12px; font-weight: bold; color: var(--ink-soft); }

.row-passive { border-color: rgba(27,94,32,0.15); background: rgba(27,94,32,0.02); }
.row-passive .skill-label { color: #1b5e20; }

.row-limit { border-color: rgba(142,68,173,0.25); background: rgba(142,68,173,0.02); }
.row-limit .skill-label { color: #8e44ad; }
.limit-flex { display: flex; justify-content: space-between; align-items: center; }
.fury-tag { font-size: 8px; font-weight: bold; color: #8e44ad; opacity: 0.8; }
.skill-subvalue { font-size: 11px; font-style: italic; color: #6a1b9a; margin-top: 1px; }

/* Global Confirmation Action */
.manifest-confirm-btn {
    width: 100%; 
    padding: 12px; 
    background: var(--blood); 
    color: var(--parchment);
    border: 2px solid var(--ink); 
    font-family: var(--font-head); 
    font-weight: bold;
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    border-radius: 4px;
    cursor: pointer; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 5px;
}
.manifest-confirm-btn:hover { background: #a00000; }

/* Dynamic Frame Card Border Tints */
.detail-stat-str { border-color: var(--blood); }
.detail-stat-mag { border-color: #4527a0; }
.detail-stat-dex { border-color: #01579b; }
.detail-stat-def { border-color: #1b5e20; }


/* --- Compendium Core Additions --- */
.compendium-intro {
    text-align: center;
    margin-bottom: 20px;
}

/* Attributes Shrine row inside the popups */
.compendium-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}

.mini-stat-shrine {
    background: rgba(62, 39, 35, 0.04);
    border: 1px solid rgba(62, 39, 35, 0.15);
    border-radius: 4px;
    padding: 4px 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.mini-stat-shrine.active-shrine {
    background: rgba(128, 0, 0, 0.05);
    border-color: var(--blood);
}

.mini-shrine-label {
    font-size: 7px;
    color: #795548;
    text-transform: uppercase;
    font-weight: bold;
}

.mini-shrine-val {
    font-size: 11px;
    font-weight: bold;
    color: var(--ink);
}
.active-shrine .mini-shrine-val {
    color: var(--blood);
}

/* Strategic Text Field styling */
.archive-strategy-box {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-left: 2px solid #795548;
    padding: 8px 10px;
    border-radius: 0 4px 4px 0;
}

.archive-strategy-label {
    font-size: 8px;
    font-weight: bold;
    color: var(--ink-soft);
    letter-spacing: 0.5px;
    display: block;
}

.archive-strategy-text {
    margin: 2px 0 0 0;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ink);
}

/* Replaces button with decorative book divider element */

/* --- Passive Turn Threshold Timer Badge --- */
.passive-timer-tag {
    font-size: 8px;
    font-weight: bold;
    color: #1b5e20; /* Matches the custom green color accent used for Passives */
    background: rgba(27, 94, 32, 0.08);
    border: 1px solid rgba(27, 94, 32, 0.2);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1;
}

.begin-game {
    color: #333;
}


/* Big Red Title matching "OATHBOUND" */

/* Act Subtitle (ACT I: THE ASHEN LEGEND) */

/* --- BADGE STYLING --- */
.act-badge-container {
    margin: 20px 0;
    display: flex;
    justify-content: center;
}

.act-badge-pill {
    background-color: rgba(74, 59, 50, 0.05); /* Subtly darker parchment fill */
    border: 1px solid rgba(74, 59, 50, 0.2);
    color: #706253;
    padding: 6px 16px;
    border-radius: 20px; /* Gives the classic pill/badge look */
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: bold;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* --- IMAGE FRAME STYLING --- */
.act-hero-frame {
    background: #fdf8eb;
    padding: 8px;
    border: 1px solid #bda88a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    margin: 20px auto;
    max-width: 280px;
    width: 100%;
}

/* Divider line */

/* --- TEXT CONTAINER CARDS (The Content Badges) --- */
.act-body-card, .standard-chapter-card {
    background-color: #fcf5e7; /* Contrast card color */
    border: 1px solid #dcd1bd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}

/* First-letter dropcap styling seen in your image */
.lore-content::first-letter {
    font-size: 3.5rem;
    font-weight: bold;
    color: #8b1e0f;
    float: left;
    line-height: 0.85;
    margin-right: 8px;
    margin-top: 4px;
    font-family: 'Georgia', serif;
}

/* Highlighted keywords styling (e.g., Aethelgard) */
.lore-content em, .lore-content strong {
    color: #b05c33; /* Warm orange-brown highlight */
    font-style: normal;
    font-weight: bold;
}

/* Base Style for both Action Buttons */
.book-action-btn {
    background-color: #ebdcb9; /* Slightly darker parchment button tone */
    color: #4a3b32;
    border: 1px solid #bda88a;
    border-radius: 4px;
    padding: 6px 14px;
    font-family: 'Georgia', serif;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    z-index: 50; /* Ensure it stays above content text layout layers */
}

/* Hover & Active States */
.book-action-btn:hover {
    background-color: #fcf5e7;
    border-color: #8b1e0f;
    color: #8b1e0f;
}

.book-action-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Position Strategy: Top Right */
.btn-top-right {
    position: absolute;
    top: 20px;
    right: 20px;
}

/* Position Strategy: Bottom Right 
   Using a relative container offset ensures it clears scroll content cleanly */
.btn-bottom-right {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

/* --- BOTTOM OBJECTIVE BADGE STYLING --- */
.chapter-objective-badge {
    display: flex;
    align-items: center;
    /* Changed from #ebdcb9 to a deeper, richer parchment tone for better text legibility */
    background-color: #dfcea5; 
    border: 1px solid #b39e7f;
    border-radius: 6px;
    padding: 12px 16px; /* Slightly more padding for the larger image */
    margin-top: 24px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Bumped up from 42px to 56px to show off the sketch details */
.objective-icon-frame {
    width: 56px;
    height: 56px;
    border-radius: 50%; 
    border: 1px solid #5a4b3e; /* Darkened border for sharper contrast */
    background-size: cover;
    background-position: center;
    margin-right: 16px; /* Slightly more breathing room next to the text */
    flex-shrink: 0;
}

/* Typography wrapper remains clean */
.objective-text-side {
    display: flex;
    flex-direction: column;
}

/* "The Journey Ahead" - Darkened text color slightly for contrast */
.objective-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a4b3e; 
    font-weight: bold;
    margin-bottom: 2px;
}

/* "Spider Cave" - Rich crimson remains highly readable */
.objective-destination {
    font-size: 1.05rem; /* Bumped up slightly to balance the larger icon */
    font-weight: bold;
    color: #8b1e0f; 
    font-family: 'Georgia', serif;
}