/* =============================================================================
   🌸 BLESSINGS · 祝福 — small gifts from the engine
   Two surfaces:
     1. Floating Blessing card (appears top-right on any page when one is pending)
     2. Blessings Book panel (lives on the Spirit page)
   ============================================================================= */

/* ░░░░░░░░░░░░░ Floating Blessing card ░░░░░░░░░░░░░ */
.blessing-floater-wrap {
    position: fixed;
    top: 110px; right: 24px;
    z-index: 9100;
    max-width: 420px;
    pointer-events: none;   /* let other UI through; the card itself is clickable */
}
.blessing-card {
    pointer-events: auto;
    cursor: pointer;
    padding: 18px 22px 16px;
    border: 1.5px solid var(--bl-hue, #ddc88a);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top right, color-mix(in srgb, var(--bl-hue, #ddc88a) 28%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(34, 22, 72, 0.98), rgba(10, 8, 24, 1.0));
    box-shadow:
        0 14px 38px rgba(0,0,0,0.65),
        0 0 26px var(--bl-hue, #ddc88a),
        inset 0 1px 0 color-mix(in srgb, var(--bl-hue, #ddc88a) 25%, transparent);
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.85s cubic-bezier(0.25, 1.1, 0.4, 1), opacity 0.55s;
}
.blessing-card.is-visible {
    transform: translateX(0); opacity: 1;
}
.blessing-card .bc-label {
    font-family: "Cormorant Garamond", serif;
    font-size: 10px; font-style: italic;
    color: #b095f5;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.blessing-card .bc-head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 10px;
}
.blessing-card .bc-glyph {
    font-size: 38px;
    color: var(--bl-hue, #ddc88a);
    text-shadow: 0 0 18px var(--bl-hue, #ddc88a);
    line-height: 1;
}
.blessing-card .bc-glyph.bc-glyph-petal {
    animation: blessingFloat 5.5s ease-in-out infinite;
}
@keyframes blessingFloat {
    0%, 100% { transform: translateY(0)   rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg);  }
}
.blessing-card .bc-rarity-pill {
    font-family: "Cormorant Garamond", serif;
    font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bl-hue, #ddc88a);
    border: 1px solid var(--bl-hue, #ddc88a);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.30);
}
.blessing-card .bc-voice {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: #ffe9c9;
    text-shadow: 0 0 6px rgba(255, 232, 201, 0.30);
}
.blessing-card .bc-payload {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 232, 201, 0.20);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: #ddc88a;
    text-align: center;
}
.blessing-card .bc-payload-ball {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #fff6dc, var(--bl-hue, #ddc88a) 75%);
    color: #2b1f08;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 18px;
    box-shadow:
        0 0 16px var(--bl-hue, #ddc88a),
        inset 0 -2px 4px rgba(0,0,0,0.25);
}
.blessing-card .bc-foot {
    margin-top: 10px;
    font-family: "Cormorant Garamond", serif;
    font-size: 10.5px; font-style: italic;
    color: #888aa0;
    text-align: right;
}

/* Rarity palette */
.blessing-card[data-rarity="common"]  { --bl-hue: #ddc88a; }
.blessing-card[data-rarity="rare"]    { --bl-hue: #9bd5ff; }
.blessing-card[data-rarity="mythic"]  { --bl-hue: #d699ff; }

/* ░░░░░░░░░░░░░ Blessings Book (panel on Spirit page) ░░░░░░░░░░░░░ */
.panel-blessings-book {
    margin-top: 18px;
    padding: 18px 22px;
    border: 1px solid rgba(214, 153, 255, 0.20);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at top, rgba(214, 153, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(20, 14, 36, 0.85), rgba(12, 8, 24, 0.95));
}

.bl-summary {
    display: flex;
    gap: 24px;
    font-family: "Cormorant Garamond", serif;
    font-size: 12px;
    color: #888aa0;
    margin: 8px 0 14px;
    padding: 8px 0;
    border-top: 1px dashed rgba(214, 153, 255, 0.15);
    border-bottom: 1px dashed rgba(214, 153, 255, 0.15);
    font-style: italic;
}
.bl-stat-num {
    font-family: "JetBrains Mono", monospace;
    color: #ddc88a;
    font-weight: 700;
    font-size: 16px;
    margin-right: 4px;
    font-style: normal;
}

.bl-list {
    display: flex; flex-direction: column;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 4px;
}
.bl-entry {
    --ble-hue: #ddc88a;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: start;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--ble-hue) 28%, transparent);
    border-left: 3px solid var(--ble-hue);
    border-radius: 10px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ble-hue) 7%, transparent),
        rgba(10, 8, 24, 0.70));
    transition: transform 0.2s;
}
.bl-entry:hover { transform: translateX(3px); }
.bl-entry[data-rarity="rare"]   { --ble-hue: #9bd5ff; }
.bl-entry[data-rarity="mythic"] { --ble-hue: #d699ff; }
.bl-entry.is-unread {
    box-shadow: 0 0 10px var(--ble-hue);
}
.bl-entry-glyph {
    font-size: 22px;
    color: var(--ble-hue);
    text-shadow: 0 0 10px var(--ble-hue);
    line-height: 1;
    text-align: center;
}
.bl-entry-body { display: flex; flex-direction: column; gap: 4px; }
.bl-entry-kind {
    font-family: "Cormorant Garamond", serif;
    font-size: 10px;
    color: var(--ble-hue);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.bl-entry-voice {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 13px;
    color: #ddc88a;
    line-height: 1.4;
}
.bl-entry-when {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: #6f6c85;
    margin-top: 2px;
}
.bl-entry-meta {
    text-align: right;
    display: flex; flex-direction: column; gap: 4px;
    font-family: "Cormorant Garamond", serif;
    font-size: 9.5px;
    color: var(--ble-hue);
    letter-spacing: 1.5px;
}
.bl-entry-status {
    font-style: italic;
    color: #888aa0;
}
.bl-entry.is-unread .bl-entry-status { color: var(--ble-hue); font-style: normal; }