/* ═══════════════════════════════════════════════════
   theme-glass.css  —  glassmorphism notification cards
   ═══════════════════════════════════════════════════ */

.theme-glass {
    font-family: 'JetBrains Mono', monospace;
}

/* ── header ─────────────────────────────────────── */
.theme-glass #header {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.theme-glass #header .title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.12em;
}

.theme-glass #header .game-label {
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
}

/* ── feed ────────────────────────────────────────── */
.theme-glass #feed { gap: 6px; }

/* ── entry cards ─────────────────────────────────── */
.theme-glass .entry {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    position: relative;
    overflow: hidden;
    animation: glassIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* top accent stripe */
.theme-glass .entry::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 8px 8px 0 0;
}

.theme-glass .entry.prog::before   { background: var(--prog); box-shadow: 0 0 12px rgba(245,197,66,0.5); }
.theme-glass .entry.useful::before { background: var(--useful); box-shadow: 0 0 12px rgba(74,222,128,0.4); }
.theme-glass .entry.trap::before   { background: var(--trap); box-shadow: 0 0 12px rgba(248,113,113,0.5); }
.theme-glass .entry.normal::before { background: rgba(99, 102, 241, 0.5); }

/* subtle tinted glow on card bg */
.theme-glass .entry.prog   { box-shadow: inset 0 0 40px rgba(245,197,66,0.04); }
.theme-glass .entry.useful { box-shadow: inset 0 0 40px rgba(74,222,128,0.04); }
.theme-glass .entry.trap   { box-shadow: inset 0 0 40px rgba(248,113,113,0.05); }

/* ── item name ───────────────────────────────────── */
.theme-glass .g-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--outline);
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.theme-glass .entry.prog   .g-name { color: var(--prog); }
.theme-glass .entry.useful .g-name { color: var(--useful); }
.theme-glass .entry.trap   .g-name { color: var(--trap); }
.theme-glass .entry.normal .g-name { color: var(--normal); }

/* ── badge ───────────────────────────────────────── */
.theme-glass .g-badge {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 1px 6px;
    border-radius: 4px;
    flex-shrink: 0;
    text-shadow: none;
    align-self: center;
}

.theme-glass .entry.prog   .g-badge { background: rgba(245,197,66,0.15);  color: var(--prog);   border: 1px solid rgba(245,197,66,0.3); }
.theme-glass .entry.useful .g-badge { background: rgba(74,222,128,0.12);  color: var(--useful); border: 1px solid rgba(74,222,128,0.28); }
.theme-glass .entry.trap   .g-badge { background: rgba(248,113,113,0.15); color: var(--trap);   border: 1px solid rgba(248,113,113,0.28); }

/* ── meta row ────────────────────────────────────── */
.theme-glass .g-meta {
    font-size: 11px;
    margin-top: 5px;
    color: rgba(148, 163, 184, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: var(--outline);
}

.theme-glass .slot-name {
    font-weight: 600;
    text-shadow: var(--outline);
}

.theme-glass .g-sep {
    color: rgba(100, 116, 139, 0.45);
    margin: 0 4px;
    font-weight: 400;
}

/* ── animations ──────────────────────────────────── */
@keyframes glassIn {
    from { opacity: 0; transform: scale(0.95) translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.theme-glass .entry.removing {
    animation: glassOut 0.26s ease-out forwards;
}

@keyframes glassOut {
    to {
        opacity: 0;
        transform: scale(0.93);
        max-height: 0;
        padding: 0 14px;
        margin: 0;
    }
}