/* Story Features — shared front-end styles. Flat/matte, borders only for
   elevation, no gradients or box-shadows, blue-600 accent — matches the
   rest of the Kreator NG front end. */

/* Previously On... recap */
.hbp-recap-block {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: #F8FAFC;
}
.hbp-recap-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2563EB;
    margin-bottom: 6px;
}
.hbp-recap-text {
    font-size: 14px;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0 0 10px;
}
.hbp-recap-audio { width: 100%; }

/* Cast tab */
.hbp-cast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 16px;
    padding: 16px 0;
}
.hbp-cast-card { text-align: center; }
.hbp-cast-portrait {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
    border-radius: 50%;
    border: 1px solid #E5E7EB;
    background-color: #F1F5F9;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hbp-cast-initial { font-size: 28px; font-weight: 700; color: #9CA3AF; }
.hbp-cast-spinner {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #2563EB;
    animation: hbp-cast-spin 1s linear infinite;
}
@keyframes hbp-cast-spin { to { transform: rotate(360deg); } }
.hbp-cast-name { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.hbp-cast-desc { font-size: 11.5px; color: #6B7280; margin: 2px 0 0; }

/* Timeline tab */
.hbp-timeline { position: relative; padding-left: 20px; }
.hbp-timeline-node { position: relative; padding-bottom: 20px; border-left: 2px solid #E5E7EB; padding-left: 20px; }
.hbp-timeline-node:last-child { border-left-color: transparent; }
.hbp-timeline-marker {
    position: absolute;
    left: -7px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #E5E7EB;
    border: 2px solid #fff;
}
.hbp-timeline-node.is-unlocked .hbp-timeline-marker { background: #2563EB; }
.hbp-timeline-meta { font-size: 11px; color: #9CA3AF; text-transform: uppercase; letter-spacing: .04em; }
.hbp-timeline-title { font-size: 14.5px; font-weight: 700; color: #1a1a1a; margin: 2px 0 4px; }
.hbp-timeline-summary { font-size: 13px; color: #374151; margin: 0; }
.hbp-timeline-summary.hbp-timeline-locked {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9CA3AF;
    font-style: italic;
}

/* Fan art tab */
.hbp-fanart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; padding: 12px 0; }
.hbp-fanart-item { margin: 0; border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.hbp-fanart-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.hbp-fanart-item figcaption { padding: 8px 10px; }
.hbp-fanart-caption { display: block; font-size: 12px; color: #374151; margin-bottom: 2px; }
.hbp-fanart-credit { display: block; font-size: 11px; color: #9CA3AF; }

/* Synced drop live room */
.hbp-sync-drop-room {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: #FFFFFF;
}
.hbp-sync-drop-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: #B91C1C;
    margin-bottom: 10px;
}
.hbp-sync-drop-dot { width: 8px; height: 8px; border-radius: 50%; background: #DC2626; animation: hbp-sync-pulse 1.2s ease-in-out infinite; }
@keyframes hbp-sync-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hbp-sync-drop-room.is-ended .hbp-sync-drop-badge { color: #9CA3AF; }
.hbp-sync-drop-room.is-ended .hbp-sync-drop-dot { animation: none; background: #D1D5DB; }
.hbp-sync-drop-feed { max-height: 160px; overflow-y: auto; font-size: 12.5px; margin-bottom: 10px; }
.hbp-sync-drop-msg { padding: 4px 0; border-bottom: 1px solid #F1F5F9; }
.hbp-sync-drop-form { display: flex; gap: 8px; }
.hbp-sync-drop-form input { flex: 1; padding: 7px 10px; border: 1px solid #D1D5DB; border-radius: 8px; font-size: 12.5px; }
.hbp-sync-drop-form button { padding: 7px 14px; border-radius: 8px; border: none; background: #2563EB; color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; }