/* css/bibles.css — Blood Bible possession overview presentation.
   Scoped to #bibles / bb- classes. Shares the visual language of the
   Event Calendar (pages/events.php) without copying its boxed layout. */

#bibles {
    --bb-ink: #252525;
    --bb-muted: #5b5955;
    --bb-line: #c9c6c0;
    --bb-red: #8d1f1f;
    --bb-metal: #b89d6f;
    --bb-race: #625f59;
    --bb-race-bright: #c9c6c0;
    --bb-race-glow: rgba(98, 95, 89, 0.35);
    color: var(--bb-ink);
}
.bb-race-slayers { --bb-race: #285b88; --bb-race-bright: #85b9eb; --bb-race-glow: rgba(40, 91, 136, 0.45); }
.bb-race-vampires { --bb-race: #962d35; --bb-race-bright: #ef969d; --bb-race-glow: rgba(150, 45, 53, 0.45); }
.bb-race-ousters { --bb-race: #286245; --bb-race-bright: #85cba4; --bb-race-glow: rgba(40, 98, 69, 0.45); }
/* Keep the panel inside the viewport on narrow screens. Overrides the
   global .page-container.container mobile width without editing style.css. */
#bibles.page-container.container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    #bibles.page-container.container {
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
}
#bibles a:focus-visible { outline: 2px solid var(--bb-red); outline-offset: 4px; }

.bb-shell {
    background: #e9e8e4;
    border: 1px solid #99958e;
    border-radius: 5px;
    box-shadow: 0 12px 28px #0003;
    overflow-wrap: anywhere;
}

/* Masthead */
.bb-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 30px 32px;
    background: #202020;
    border-top: 3px solid var(--bb-metal);
    color: #f5f0e8;
}
.bb-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .17em;
}
.bb-masthead .bb-kicker { color: #cbb58e; }
.bb-masthead h1 {
    margin: 6px 0 8px;
    color: #f5f0e8;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    letter-spacing: -.035em;
}
.bb-intro { color: #c9c6c0; font-size: 14px; }
.bb-clock {
    padding-left: 28px;
    border-left: 1px solid #ffffff26;
    text-align: right;
}
.bb-clock time,
.bb-dash {
    display: block;
    font: 22px/1.3 Consolas, monospace;
    font-variant-numeric: tabular-nums;
    margin: 5px 0;
}
.bb-dash { color: #c9c6c0; }
.bb-clock small { color: #c9c6c0; font-size: 12px; }

/* Status notices (partial / stale / unavailable) */
.bb-notice {
    margin: 0;
    padding: 12px 32px;
    background: #f3efe6;
    border-bottom: 1px solid var(--bb-line);
    color: var(--bb-ink);
    font-size: 13px;
}
.bb-notice-error { background: #f0e2e2; color: var(--bb-red); }

/* Realm overview: control distribution + next war */
.bb-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    background: #2a2725;
    color: #f5f0e8;
    border-top: 1px solid #ffffff1c;
}
.bb-control { padding: 22px 32px; min-width: 0; }
.bb-control-head h2 {
    color: #cbb58e;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.bb-control-head p { color: #c9c6c0; font-size: 12px; margin-top: 6px; }
.bb-control-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}
.bb-stat { min-width: 0; }
.bb-stat dt {
    color: var(--bb-race-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bb-stat dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 4px;
}
.bb-stat-count {
    color: #f5f0e8;
    font: 30px/1.1 Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.bb-stat-pct { color: #c9c6c0; font-size: 12px; }
.bb-distribution {
    display: flex;
    height: 4px;
    margin-top: 16px;
    background: #3d3936;
}
.bb-distribution-seg { height: 100%; background: var(--bb-race); }
.bb-unknown-seg { background: #87847e; }
/* Shares are twelfths of the twelve bibles; classes avoid data-driven inline styles. */
.bb-share-0 { width: 0; }
.bb-share-1 { width: 8.3333%; }
.bb-share-2 { width: 16.6667%; }
.bb-share-3 { width: 25%; }
.bb-share-4 { width: 33.3333%; }
.bb-share-5 { width: 41.6667%; }
.bb-share-6 { width: 50%; }
.bb-share-7 { width: 58.3333%; }
.bb-share-8 { width: 66.6667%; }
.bb-share-9 { width: 75%; }
.bb-share-10 { width: 83.3333%; }
.bb-share-11 { width: 91.6667%; }
.bb-share-12 { width: 100%; }
.bb-control-note { color: #c9c6c0; font-size: 11px; margin-top: 8px; }
.bb-next {
    padding: 22px 32px;
    border-left: 1px solid #ffffff26;
    min-width: 0;
}
.bb-next .bb-kicker { color: #cbb58e; }
.bb-next h2 { color: #f5f0e8; font-size: 20px; letter-spacing: -.02em; margin: 6px 0 4px; }
.bb-next-when { color: #c9c6c0; font-size: 12px; }
.bb-next-count {
    color: #cbb58e;
    font: 16px/1.5 Consolas, monospace;
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
}
.bb-next-count.is-live { color: #85cba4; }
.bb-next-link {
    display: inline-block;
    margin-top: 10px;
    color: #85b9eb;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.bb-next-link:hover { color: #ffffff; text-decoration: underline; }

/* Jumps */
.bb-jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    padding: 13px 32px;
    background: #dcdad5;
    border-bottom: 1px solid var(--bb-line);
}
.bb-jumps a {
    color: var(--bb-ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.bb-jumps a:hover { color: var(--bb-red); text-decoration: underline; }
.bb-jumps small { margin-left: auto; color: var(--bb-muted); font-size: 11px; }

/* Sections */
.bb-section { padding: 28px 32px; scroll-margin-top: 16px; }
.bb-section + .bb-section { border-top: 1px solid var(--bb-line); }
.bb-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
    margin-bottom: 18px;
}
.bb-section h2 {
    color: var(--bb-ink);
    font-size: 23px;
    letter-spacing: -.025em;
    line-height: 1.25;
}
.bb-section-head p,
.bb-caption { color: var(--bb-muted); font-size: 12px; }

/* Possession entries: editorial rows, image and owner carry the identity. */
.bb-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 28px;
}
.bb-item {
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--bb-line);
}
.bb-item-media {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb-item-media img {
    display: block;
    width: 56px;
    height: 56px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px var(--bb-race-glow)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}
.bb-item-body { min-width: 0; }
.bb-item h3 { font-size: 17px; letter-spacing: -.02em; margin: 2px 0 4px; }
.bb-item-bonus { color: var(--bb-muted); font-size: 12px; line-height: 1.5; margin: 0 0 6px; }
.bb-owner,
.bb-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.bb-owner { color: var(--bb-race); }
.bb-status { color: var(--bb-muted); }
.bb-owner::before,
.bb-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bb-race);
    box-shadow: 0 0 4px var(--bb-race-glow);
    flex-shrink: 0;
}
.bb-status::before { background: #87847e; box-shadow: 0 0 4px rgba(98, 95, 89, 0.35); }

/* Personal protection copy and scale */
.bb-note { color: var(--bb-muted); font-size: 13px; line-height: 1.65; max-width: 78ch; }
.bb-scale-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    max-width: 640px;
    margin-bottom: 8px;
    color: var(--bb-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bb-scale {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    max-width: 640px;
}
.bb-scale li {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 12px 6px 10px;
    background: #f1f0ed;
    border: 1px solid var(--bb-line);
    border-top: 3px solid var(--bb-red);
    text-align: center;
}
.bb-scale-bar {
    display: flex;
    align-items: flex-end;
    width: 18px;
    height: 46px;
    background: #e1dfda;
    border: 1px solid var(--bb-line);
}
.bb-scale-fill { width: 100%; background: var(--bb-red); opacity: .82; }
.bb-scale-fill-10 { height: 100%; }
.bb-scale-fill-8 { height: 80%; }
.bb-scale-fill-6 { height: 60%; }
.bb-scale-fill-5 { height: 50%; }
.bb-scale-fill-4 { height: 40%; }
.bb-scale-fill-3 { height: 30%; }
.bb-scale-fill-2 { height: 20%; }
.bb-scale-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #fbfaf8;
    border: 1px solid var(--bb-line);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05);
    color: var(--bb-ink);
    font: 700 14px/1 Consolas, monospace;
}
.bb-scale-value {
    margin-top: 5px;
    color: var(--bb-ink);
    font: 15px/1.2 Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.bb-scale-max { border-top-color: var(--bb-metal); background: #f6f3ec; }
.bb-scale-max .bb-scale-fill { background: var(--bb-metal); opacity: 1; }
.bb-scale-max .bb-scale-count { border-color: var(--bb-metal); background: #f9f4e9; color: #8a7447; }
.bb-scale-max::after {
    content: "MAX";
    margin-top: 6px;
    color: #8a7447;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* War history record */
.bb-recurring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-recurring article { min-width: 0; padding: 0 24px; border-left: 1px solid var(--bb-line); }
.bb-recurring article:first-child { padding-left: 0; border-left: 0; }
.bb-recurring article:last-child { padding-right: 0; }
.bb-recurring h3 { font-size: 20px; color: var(--bb-race); margin-bottom: 8px; }
.bb-recurring p { color: var(--bb-muted); font-size: 12px; line-height: 1.65; }
.bb-history-count { margin-bottom: 12px; }
.bb-history-count strong { color: var(--bb-race); font: 24px/1.2 Consolas, monospace; margin-right: 4px; }
.bb-history-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.bb-history-list img { display: block; width: 24px; height: 24px; }
.bb-caption { margin-top: 18px; }
.bb-empty { padding: 4px 0; }
.bb-empty h3 { color: var(--bb-ink); font-size: 16px; margin-bottom: 6px; }
.bb-empty p { color: var(--bb-muted); font-size: 13px; max-width: 46ch; }

/* Footer */
.bb-footnote {
    border-top: 1px solid var(--bb-line);
    padding: 14px 32px;
    color: var(--bb-muted);
    font-size: 11px;
    background: #dedcd7;
}

/* Homepage possession strip: one row of twelve compact bible cells */
.bb-strip {
    --bb-ink: #252525;
    --bb-muted: #5b5955;
    --bb-line: #c9c6c0;
    --bb-red: #8d1f1f;
    --bb-metal: #b89d6f;
    --bb-race: #625f59;
    --bb-race-glow: rgba(98, 95, 89, 0.35);
    background: #e9e8e4;
    border: 1px solid #99958e;
    /* border-radius: 5px; */
    box-shadow: 0 12px 28px #0003;
    padding: 18px 20px 14px;
    margin-bottom: 5px;
}
.bb-strip .bb-race-slayers { --bb-race: #285b88; --bb-race-glow: rgba(40, 91, 136, 0.45); }
.bb-strip .bb-race-vampires { --bb-race: #962d35; --bb-race-glow: rgba(150, 45, 53, 0.45); }
.bb-strip .bb-race-ousters { --bb-race: #286245; --bb-race-glow: rgba(40, 98, 69, 0.45); }
.bb-strip-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 14px;
}
.bb-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    padding: 6px 0 10px;
    border-bottom: 1px solid var(--bb-line);
}
.bb-strip-item img {
    display: block;
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px var(--bb-race-glow)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.18));
}
.bb-strip-name {
    margin: 6px 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--bb-ink);
}
.bb-strip-owner,
.bb-strip-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
}
.bb-strip-owner { color: var(--bb-race); }
.bb-strip-status { color: var(--bb-muted); }
.bb-strip-owner::before,
.bb-strip-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bb-race);
    box-shadow: 0 0 4px var(--bb-race-glow);
    flex-shrink: 0;
}
.bb-strip-status::before { background: #87847e; box-shadow: 0 0 4px rgba(98, 95, 89, 0.35); }
.bb-strip-item { position: relative; }
.bb-strip-bonus {
    position: absolute;
    left: 50%;
    top: 100%;
    z-index: 5;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 6px 9px;
    background: #202020;
    color: #cbb58e;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: 3px;
    box-shadow: 0 4px 12px #0006;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, visibility .12s ease;
}
.bb-strip-item:hover .bb-strip-bonus {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1023px) {
    .bb-masthead,
    .bb-control,
    .bb-section { padding: 22px; }
    .bb-next { padding: 22px; border-left: 0; border-top: 1px solid #ffffff26; }
    .bb-notice,
    .bb-jumps,
    .bb-footnote { padding-left: 22px; padding-right: 22px; }
    .bb-overview { grid-template-columns: 1fr; }
    .bb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-strip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 639px) {
    .bb-masthead { grid-template-columns: 1fr; gap: 18px; }
    .bb-clock {
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid #ffffff26;
        text-align: left;
    }
    .bb-clock time,
    .bb-dash { display: inline-block; margin: 5px 12px 0 0; font-size: 18px; }
    .bb-masthead,
    .bb-control,
    .bb-section { padding: 20px 16px; }
    .bb-next { padding: 20px 16px; }
    .bb-notice,
    .bb-jumps,
    .bb-footnote { padding-left: 16px; padding-right: 16px; }
    .bb-jumps { gap: 8px 18px; }
    .bb-jumps a { min-height: 30px; display: inline-flex; align-items: center; }
    .bb-jumps small { margin-left: 0; flex-basis: 100%; }
    .bb-control-stats { gap: 8px; }
    .bb-stat-count { font-size: 24px; }
    .bb-list { grid-template-columns: 1fr; }
    .bb-scale { gap: 4px; }
    .bb-scale li { padding: 8px 2px; }
    .bb-scale-count { width: 24px; height: 24px; font-size: 12px; margin-bottom: 6px; }
    .bb-scale-bar { width: 14px; height: 34px; }
    .bb-scale-value { font-size: 12px; }
    .bb-recurring { grid-template-columns: 1fr; gap: 22px; }
    .bb-recurring article,
    .bb-recurring article:first-child { padding: 0; border-left: 0; }
    .bb-recurring article + article { border-top: 1px solid var(--bb-line); padding-top: 22px; }
    .bb-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
}