:root {
    --site-background-image: url('../img/bg.jpg');
    --bg-dim: .5;
    --story-color: var(--tc, #e8e0d0);
}
html, body { min-height: 100vh; }
body {
    position: relative;
    margin: 0;
    /* Satu lapisan clearance saja: cukup untuk widget fixed tanpa ruang kosong ganda. */
    padding: 0 0 calc(var(--bb, 62px) + var(--mb, 120px) + 56px) !important;
    color: #e8e0d0;
    background-color: #0a0805;
    /* Gambar diletakkan di pseudo-layer agar mobile tidak gagal menggambar fixed body background. */
    background-image: none;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #0a0805;
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--bg-dim, .5)), rgba(0, 0, 0, var(--bg-dim, .5))),
        var(--site-background-image);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.wrap, main, #main-wrap, .ch-wrap, .km-wrap, .page-shell-content {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* Footer tetap berada di alur dokumen; fixed widgets tidak boleh menutup isi footer. */
.site-footer {
    position: relative;
    z-index: 1;
    padding-bottom: 12px !important;
    scroll-margin-bottom: calc(var(--bb, 62px) + var(--mb, 120px) + 56px);
}
.footer-box { position: relative; z-index: 1; }

/* Player minimized hanya membutuhkan clearance kecil; ini menghapus ruang kosong besar pada HP. */
body:has(#music-box.minimized) {
    padding-bottom: calc(var(--bb, 62px) + var(--mb, 120px) + 20px) !important;
}
body:has(#music-box.minimized) .site-footer {
    padding-bottom: 8px !important;
    scroll-margin-bottom: calc(var(--bb, 62px) + var(--mb, 120px) + 20px);
}

/* Teks isi mengikuti font, alignment, dan warna tema dari Panel Mode. */
.ch-teks,
.bc-teks,
[data-reader-text],
.story-content {
    color: var(--story-color, var(--tc, #e8e0d0)) !important;
    font-size: var(--fs, 16px) !important;
    text-align: var(--text-align, justify) !important;
}
.km-msg,
.km-reply-body p,
.km-empty,
.km-form-box input,
.km-form-box textarea { font-size: var(--fs, 16px) !important; }

@media (max-width: 600px) {
    /* Chrome Android lebih konsisten merender fixed pseudo-layer daripada fixed body background. */
    body { background-attachment: scroll; }
    body::before { position: fixed; background-position: center top; }
}

/* Halaman detail memakai tinggi konten aktual; footer tidak dipaksa turun ke dasar viewport. */
html:has(body.detail-character-page),
body.detail-character-page { min-height: 0 !important; }