/* ==========================================================================
   Styles that used to be written into the page by JavaScript. They are linked last
   (after duel.css), which is where those \3c style> blocks used to end up, so the
   cascade is unchanged.
   ========================================================================== */

/* --- COMPENDIUM: bestiary list (was in src/screens/compendium.js) ---
   Scoped to .comp-container: unscoped, .enemy-icon / .stat-badge leaked onto the
   combat screen once the Compendium had been opened. */
.comp-container { max-width: 600px; margin: 0 auto; font-family: var(--font-body, sans-serif); }
.comp-container .loc-title { color: var(--accent-gold, var(--gold-old)); border-bottom: 1px solid rgba(var(--gold-old-rgb), 0.2); margin: 25px 0 10px 0; padding-bottom: 5px; font-size: 18px; }

/* Two-Column Grid Layout */
.comp-container .enemy-card { 
    display: grid; 
    grid-template-columns: 70px 1fr; 
    gap: 12px; 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid #333; 
    padding: 10px; 
    border-radius: 6px; 
    margin-bottom: 10px; 
}
.comp-container .enemy-boss {
    border: 1px solid red; 
}

.comp-container .enemy-icon { 
    width: 70px; 
    height: 70px; 
    border-radius: 4px; 
    overflow: hidden; 
    background: rgba(0,0,0,0.3);
}
.comp-container .enemy-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.comp-container .enemy-info { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }

/* Top Row: Name and Kill Count */
.comp-container .enemy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.comp-container .enemy-name { color: #fff; font-weight: bold; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-container .enemy-kills { font-size: 9px; color: #8e94a6; background: rgba(0,0,0,0.4); padding: 2px 6px; border-radius: 4px; }

/* Stats Grid - Squeezed into the space below the head */
.comp-container .enemy-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.comp-container .stat-badge { background: rgba(0,0,0,0.2); padding: 3px; border-radius: 3px; text-align: center; font-size: 9px; font-family: monospace; }

/* --- CHRONICLE JOURNAL layout (was injected by src/progression/chronicleView.js) --- */
.journal-layout {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.journal-sidebar {
    width: 70px;
    background: #111;
    border-right: 1px solid #222;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.journal-page-container {
    flex-grow: 1;
    overflow-y: auto;
    background: #151518;
    padding: 15px;
}
.journal-nav-item {
    background: none;
    border: none;
    color: #888;
    padding: 10px 5px;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.2s;
}
.journal-nav-item.active-chapter {
    background: #1d1d22;
    color: #fff;
    border-left: 3px solid var(--gold-old);
}
.journal-image-header {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}
.journal-image-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.journal-image-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, #151518);
}
.journal-body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #ccc;
}

/* --- MOBILE MEDIA QUERY FIX --- */
@media (max-width: 600px) {
    .journal-layout {
        flex-direction: column; 
    }
    .journal-sidebar {
        width: 100%;
        height: 65px; /* Added height for scrollbar clearance */
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #2a2a30; 
        background: #111113; 
        overflow-x: auto !important;
        overflow-y: hidden;
    }

    /* Force thin, custom scrollbar styling on mobile tabs */
    .journal-sidebar::-webkit-scrollbar {
        height: 3px; /* Thin horizontal bar indicator */
    }
    .journal-sidebar::-webkit-scrollbar-track {
        background: #111113;
    }
    .journal-sidebar::-webkit-scrollbar-thumb {
        background: #3a3a42; /* Visible, subtle grey hint line */
        border-radius: 2px;
    }

    .journal-nav-item {
        border-bottom: none;
        border-right: 1px solid #1c1c22;
        min-width: 75px; 
        padding: 6px 4px 10px 4px; /* Shifted padding down to accommodate bar */
        color: #9a9a9a; 
        opacity: 0.6;
        transition: all 0.2s ease;
    }
    .journal-nav-item.active-chapter {
        border-left: none;
        border-bottom: 3px solid var(--gold-old); 
        background: #19191e;
        color: #fff; 
        opacity: 1;
        box-shadow: inset 0 -4px 10px rgba(var(--gold-old-rgb), 0.1);
    }
    .journal-image-header {
        height: 130px; 
        margin-bottom: 12px;
    }
    .journal-body {
        font-size: 0.88rem; 
        line-height: 1.6; 
        color: #e0e0e5; 
    }
}

/* --- LOOT QUEUE: tap-to-view item tiles (was in src/loot/lootDrops.js) --- */
.obc-image-view-btn { position: relative; cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease; }
.obc-image-view-btn:active { transform: scale(0.95); border-color: #d4a373 !important; }
.obc-image-view-btn::after { content: 'VIEW'; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 8px; font-weight: bold; text-align: center; padding: 2px 0; letter-spacing: 0.5px; }

/* --- COMPENDIUM: guide and how-to rows (were repeated inline styles) --- */
.guide-row    { font-size: 13px; display: flex; gap: 8px; }
.guide-row-sm { font-size: 12px; display: flex; gap: 8px; }
.guide-list   { display: flex; flex-direction: column; gap: 8px; padding-left: 5px; }

/* --- COMPENDIUM: the tab that's open --- */
/* !important: .btn-action forces its border with !important (css/07) */
#compendium-overlay .btn-action.comp-tab-active { border-color: var(--accent-gold) !important; }