/* ═══════════════════════════════════════════════════════
   theme-souls.css  —  Dark Souls 3 item acquisition bar
   ═══════════════════════════════════════════════════════
   Adapted from DS3's bottom-screen item pickup notification:
   dark horizontal bar, fades on both edges, item name
   centered and dominant, rough ruled borders top/bottom.
   ─────────────────────────────────────────────────────── */

@font-face {
    font-family: 'AgmenaPro';
    src: url('../fonts/Agmena Pro Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'AgmenaPro';
    src: url('../fonts/Agmena Pro Book.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: block;
}

:root {
    --souls-bg:    rgba(10, 8, 12, 0.93);
    --souls-gold:  #c9a84c;
    --souls-blue:  #7a9db8;
    --souls-blood: #b03030;
    --souls-cream: #cec4b4;
    --souls-ash:   #7a7268;
    --souls-rule:  rgba(201, 168, 76, 0.7);
}

.theme-souls {
    font-family: 'AgmenaPro', Georgia, serif;
}

/* ── header ─────────────────────────────────────────── */
.theme-souls #header {
    background: var(--souls-bg);
    -webkit-mask: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask:         linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    border-top:    1px solid var(--souls-rule);
    border-bottom: 1px solid var(--souls-rule);
    box-shadow:
        0 -1px 6px rgba(201, 168, 76, 0.18),
        0  1px 6px rgba(201, 168, 76, 0.18);
    padding: 5px 18%;
    text-align: center;
    border-radius: 0;
}

.theme-souls #header .title {
    font-family: 'AgmenaPro', Georgia, serif;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--souls-gold);
    text-shadow: 0 0 14px rgba(201,168,76,0.5), var(--outline);
}

.theme-souls #header .game-label {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--souls-ash);
    text-shadow: var(--outline);
}

/* ── feed ────────────────────────────────────────────── */
.theme-souls #feed { gap: 2px; }

/* ── entry — the DS3 notification bar ───────────────── */
.theme-souls .entry {
    background: var(--souls-bg);
    /* horizontal fade: transparent → opaque → transparent, like DS3 bar */
    -webkit-mask: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask:         linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    border-top:    1px solid var(--souls-rule);
    border-bottom: 1px solid var(--souls-rule);
    box-shadow:
        0 -1px 6px rgba(201, 168, 76, 0.18),
        0  1px 6px rgba(201, 168, 76, 0.18);
    padding: 7px 18% 5px;
    text-align: center;
    border-radius: 0;
    position: relative;
    animation: soulsIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* prog: warm ember bleed from center */
.theme-souls .entry.prog {
    background: radial-gradient(ellipse 80% 100% at 50% 50%,
        rgba(90, 50, 5, 0.55) 0%,
        rgba(10, 8, 12, 0.93) 70%
    );
}

/* trap: blood bleed */
.theme-souls .entry.trap {
    background: radial-gradient(ellipse 80% 100% at 50% 50%,
        rgba(80, 10, 10, 0.5) 0%,
        rgba(10, 8, 12, 0.93) 70%
    );
}

/* ── item name — the dominant element ───────────────── */
.theme-souls .sc-name {
    font-family: 'AgmenaPro', Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
    line-height: 1.3;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--outline);
}

.theme-souls .entry.prog   .sc-name {
    color: var(--souls-gold);
    text-shadow: 0 0 18px rgba(201,168,76,0.5), var(--outline);
}
.theme-souls .entry.useful .sc-name { color: var(--souls-blue);  text-shadow: var(--outline); }
.theme-souls .entry.trap   .sc-name { color: #c84040;             text-shadow: 0 0 12px rgba(160,30,30,0.45), var(--outline); }
.theme-souls .entry.normal .sc-name { color: var(--souls-cream);  text-shadow: var(--outline); }

/* badge: lowercase, spaced, very quiet — like DS item category text */
.theme-souls .sc-badge {
    font-family: 'AgmenaPro', Georgia, serif;
    font-weight: 300;
    font-size: 8px;
    letter-spacing: 0.22em;
    color: var(--souls-ash);
    text-shadow: none;
    margin-left: 6px;
}

/* ── meta — sender · location, small and subdued ─────── */
.theme-souls .sc-meta {
    font-family: 'AgmenaPro', Georgia, serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--souls-ash);
    margin-top: 2px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--outline);
}

.theme-souls .sc-sep {
    margin: 0 4px;
    color: rgba(180, 155, 90, 0.35);
}

.theme-souls .slot-name { text-shadow: var(--outline); }

/* ── status message ──────────────────────────────────── */
.theme-souls #status-msg {
    font-family: 'AgmenaPro', Georgia, serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-align: center;
    background: var(--souls-bg);
    -webkit-mask: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask:         linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    border-top:    1px solid var(--souls-rule);
    border-bottom: 1px solid var(--souls-rule);
    color: var(--souls-ash);
    border-radius: 0;
    text-shadow: var(--outline);
}

/* ── animations ──────────────────────────────────────── */
@keyframes soulsIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.theme-souls .entry.removing {
    animation: soulsOut 0.5s ease-in forwards;
}

@keyframes soulsOut {
    0%   { opacity: 1; max-height: 60px; }
    50%  { opacity: 0; }
    100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
}