/* 52 states · 54 now-playing · 55 friends overlay · 59 trophies */

/* —— 52 empty / system states —— */
.es-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--va-border);
    background: rgba(255, 255, 255, 0.03);
    min-height: 160px;
    display: flex;
    flex-direction: column;
}
.es-card h3 {
    font-family: var(--va-display, Syne, Inter, sans-serif);
    margin: 6px 0 8px;
}
.es-card p {
    color: var(--va-text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
    flex: 1;
}
.es-card .btn { margin-top: var(--space-3); align-self: flex-start; }
.empty-state.es-card,
.inventory-empty.es-card,
.offline-empty-state.es-card {
    max-width: 420px;
    margin: 48px auto;
    text-align: left;
}

/* —— 54 now playing bar —— */
#now-playing-bar.np-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-overlay-high);
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: var(--space-3);
    align-items: center;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    background: color-mix(in srgb, var(--va-bg-elevated, #171a21) 82%, transparent);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
#now-playing-bar.np-bar.hidden { display: none !important; }
#now-playing-bar .cover {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: #12151c;
}
#now-playing-bar .np-meta b { display: block; }
#now-playing-bar .np-dock { display: flex; gap: 6px; }
#now-playing-bar .np-dock button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    border: 0;
    padding: 0;
    cursor: pointer;
}
#now-playing-bar .np-dock button.on {
    opacity: 1;
    outline: 2px solid var(--va-accent);
}
body:has(#now-playing-bar:not(.hidden)) .app-footer,
body.now-playing-active .app-footer {
    padding-bottom: 88px;
}

/* —— 55 friends overlay skin —— */
.friends-popup.friends-popup--fr {
    top: auto;
    right: 20px;
    bottom: 72px;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-height: min(640px, calc(100vh - 96px));
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    background: color-mix(in srgb, var(--va-bg-elevated, #171a21) 88%, transparent);
    -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.friends-popup.friends-popup--fr.is-anchored {
    right: auto;
    bottom: auto;
}
.friends-popup--fr .friends-popup-header {
    border-bottom: 1px solid var(--va-border);
    cursor: grab;
    -webkit-user-select: none;
            user-select: none;
    touch-action: none;
}
.friends-popup--fr .friends-popup-header:active {
    cursor: grabbing;
}
.friends-popup--fr.is-dragging {
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.65);
}
.friends-popup--fr .friends-popup-item {
    border-radius: 12px;
    margin: 2px 0;
}
.friends-popup--fr .friends-popup-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* —— 59 trophies —— */
.tr-stage {
    overflow: auto;
    padding: 20px 24px 80px;
    background: var(--va-bg, #08070a);
    min-height: calc(100vh - 120px);
    max-width: 1100px;
    margin: 0 auto;
}
.tr-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.tr-case {
    min-height: 180px;
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    background-color: #12151c;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--va-border);
}
.tr-case::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
}
.tr-case.lock { filter: grayscale(1) brightness(0.45); }
.tr-case .in {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: var(--z-base);
}
.rare-bronze { color: #c08a5a; }
.rare-silver { color: #c5cbd8; }
.rare-gold { color: #f0c14b; }
.rare-platinum { color: #b8f4ff; }
.rare-common { color: var(--va-text-muted); }

@media (max-width: 900px) {
    .tr-grid { grid-template-columns: 1fr; }
    #now-playing-bar.np-bar {
        grid-template-columns: 48px 1fr auto;
    }
    #now-playing-bar .np-dock { display: none; }
}