/* ============================================================================

   ECHOSTREAM MEDIA CARDS CSS

   Video, Photo, Audio, Short, Live, Channel, Coliseum, Library cards

   ============================================================================ */



/* ----------------------------------------------------------------------------

   BASE CARD STYLES

   ---------------------------------------------------------------------------- */

.es-card {

    background: var(--es-bg-secondary, #1a1a1a);

    border-radius: 12px;

    overflow: hidden;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.es-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0,0,0,0.3);

}



/* Stage button on cards */

.es-stage-btn {

    position: absolute;

    top: 8px;

    right: 8px;

    background: rgba(0,0,0,0.7);

    border: none;

    color: #fff;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.2s ease, background 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



.es-card:hover .es-stage-btn {

    opacity: 1;

}



.es-stage-btn:hover {

    background: var(--es-accent, #00e676);

    color: #000;

}



/* ----------------------------------------------------------------------------

   VIDEO CARDS

   ---------------------------------------------------------------------------- */

.es-video-card {

    cursor: pointer;

}



.es-video-card .es-card-thumb {

    position: relative;

    aspect-ratio: 16/9;

    overflow: hidden;

}



.es-video-card .es-card-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.es-video-card:hover .es-card-thumb img {

    transform: scale(1.05);

}



.es-duration {

    position: absolute;

    bottom: 8px;

    right: 8px;

    background: rgba(0,0,0,0.85);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    padding: 2px 6px;

    border-radius: 4px;

}



.es-live-badge {

    position: absolute;

    top: 8px;

    left: 8px;

    background: #ef4444;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 4px;

    text-transform: uppercase;

    animation: pulse-live 1.5s infinite;

}



.es-hover-play {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;

    height: 60px;

    background: rgba(0,0,0,0.7);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transition: opacity 0.2s ease;

}



.es-hover-play i {

    color: #fff;

    font-size: 24px;

    margin-left: 4px;

}



.es-video-card:hover .es-hover-play {

    opacity: 1;

}



.es-card-body {

    display: flex;

    gap: 12px;

    padding: 12px;

}



.es-card-avatar {

    flex-shrink: 0;

}



.es-card-avatar img {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    object-fit: cover;

}



.es-card-info {

    flex: 1;

    min-width: 0;

}



.es-card-title {

    margin: 0 0 4px;

    font-size: 14px;

    font-weight: 600;

    color: var(--es-text-primary, #fff);

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.es-card-channel {

    color: var(--es-text-secondary, #888);

    font-size: 13px;

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 4px;

}



.es-card-channel:hover {

    color: var(--es-text-primary, #fff);

}



.es-verified {

    color: var(--es-accent, #00e676);

    font-size: 12px;

}



.es-card-meta {

    color: var(--es-text-muted, #666);

    font-size: 12px;

    margin-top: 4px;

}



.es-meta-dot {

    margin: 0 4px;

}



.es-card-earnings {

    margin-top: 6px;

    color: var(--es-accent, #00e676);

    font-size: 12px;

    font-weight: 600;

}



.es-card-menu {

    background: transparent;

    border: none;

    color: var(--es-text-secondary, #888);

    cursor: pointer;

    padding: 4px 8px;

    opacity: 0;

    transition: opacity 0.2s ease;

}



.es-video-card:hover .es-card-menu {

    opacity: 1;

}



/* ----------------------------------------------------------------------------

   PHOTO CARDS (Masonry)

   ---------------------------------------------------------------------------- */

.es-photo-card {

    cursor: pointer;

    border-radius: 8px;

}



.es-photo-wrap {

    position: relative;

    overflow: hidden;

    border-radius: 8px;

}



.es-photo-wrap img {

    width: 100%;

    display: block;

    transition: transform 0.3s ease;

}



.es-photo-card:hover .es-photo-wrap img {

    transform: scale(1.03);

}



.es-photo-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);

    opacity: 0;

    transition: opacity 0.2s ease;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 12px;

}



.es-photo-card:hover .es-photo-overlay {

    opacity: 1;

}



.es-photo-actions {

    display: flex;

    gap: 8px;

    justify-content: flex-end;

}



.es-action-btn {

    background: rgba(255,255,255,0.2);

    border: none;

    color: #fff;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition: all 0.2s ease;

}



.es-action-btn:hover {

    background: var(--es-accent, #00e676);

    color: #000;

}



.es-photo-info {

    color: #fff;

}



.es-photo-info h4 {

    margin: 0 0 8px;

    font-size: 14px;

    font-weight: 600;

}



.es-photo-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 12px;

}



.es-photo-author {

    display: flex;

    align-items: center;

    gap: 8px;

}



.es-photo-author img {

    width: 24px;

    height: 24px;

    border-radius: 50%;

}



.es-photo-stats {

    display: flex;

    gap: 12px;

    color: rgba(255,255,255,0.8);

}



.es-photo-stats i {

    margin-right: 4px;

}



/* Special badges */

.es-echo-frame-badge,

.es-premium-badge,

.es-ssot-badge {

    position: absolute;

    top: 8px;

    left: 8px;

    padding: 4px 10px;

    border-radius: 4px;

    font-size: 11px;

    font-weight: 600;

}



.es-echo-frame-badge {

    background: linear-gradient(135deg, #3b82f6, #8b5cf6);

    color: #fff;

}



.es-premium-badge {

    background: linear-gradient(135deg, #f59e0b, #f97316);

    color: #fff;

}



.es-ssot-badge {

    background: var(--es-accent, #00e676);

    color: #000;

}



/* ----------------------------------------------------------------------------

   AUDIO CARDS

   ---------------------------------------------------------------------------- */

.es-audio-card {

    display: flex;

    gap: 16px;

    padding: 16px;

    align-items: flex-start;

}



.es-audio-art {

    position: relative;

    width: 120px;

    height: 120px;

    flex-shrink: 0;

    border-radius: 8px;

    overflow: hidden;

}



.es-audio-art img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-audio-play {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.5);

    border: none;

    color: #fff;

    font-size: 32px;

    cursor: pointer;

    opacity: 0;

    transition: opacity 0.2s ease;

    display: flex;

    align-items: center;

    justify-content: center;

}



.es-audio-card:hover .es-audio-play {

    opacity: 1;

}



.es-audio-duration {

    position: absolute;

    bottom: 4px;

    right: 4px;

    background: rgba(0,0,0,0.8);

    color: #fff;

    font-size: 11px;

    padding: 2px 6px;

    border-radius: 4px;

}



.es-audio-loop-badge {

    position: absolute;

    top: 4px;

    left: 4px;

    background: rgba(59,130,246,0.9);

    color: #fff;

    font-size: 10px;

    padding: 2px 6px;

    border-radius: 4px;

}



.es-audio-info {

    flex: 1;

    min-width: 0;

}



.es-audio-type {

    color: var(--es-text-muted, #666);

    font-size: 12px;

    margin-bottom: 4px;

}



.es-audio-title {

    margin: 0 0 4px;

    font-size: 16px;

    font-weight: 600;

    color: var(--es-text-primary, #fff);

}



.es-audio-channel {

    color: var(--es-text-secondary, #888);

    text-decoration: none;

    font-size: 14px;

}



.es-audio-meta {

    display: flex;

    gap: 16px;

    margin-top: 8px;

    color: var(--es-text-muted, #666);

    font-size: 13px;

}



.es-audio-earnings {

    color: var(--es-accent, #00e676);

    font-weight: 600;

}



.es-audio-waveform {

    margin-top: 12px;

    height: 40px;

    background: var(--es-bg-tertiary, #252525);

    border-radius: 4px;

}



.es-audio-actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.es-audio-actions button {

    background: var(--es-bg-tertiary, #252525);

    border: none;

    color: var(--es-text-secondary, #888);

    width: 36px;

    height: 36px;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.2s ease;

}



.es-audio-actions button:hover {

    background: var(--es-accent, #00e676);

    color: #000;

}



/* Audiobook progress */

.es-audio-chapters {

    margin-top: 8px;

    font-size: 12px;

    color: var(--es-text-muted, #666);

    display: flex;

    justify-content: space-between;

}



.es-audio-progress-bar {

    margin-top: 8px;

    height: 4px;

    background: var(--es-bg-tertiary, #252525);

    border-radius: 2px;

    overflow: hidden;

}



.es-audio-progress-fill {

    height: 100%;

    background: var(--es-accent, #00e676);

}



/* ----------------------------------------------------------------------------

   SHORTS CARDS

   ---------------------------------------------------------------------------- */

.es-short-card {

    cursor: pointer;

    aspect-ratio: 9/16;

    border-radius: 12px;

    position: relative;

}



.es-short-thumb {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

    border-radius: 12px;

}



.es-short-thumb video,

.es-short-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-short-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 40%);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 12px;

}



.es-short-stats {

    display: flex;

    gap: 12px;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

}



.es-short-sound {

    position: absolute;

    bottom: 60px;

    left: 8px;

    right: 8px;

    background: rgba(0,0,0,0.6);

    color: #fff;

    font-size: 11px;

    padding: 6px 10px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    gap: 8px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.es-short-trending {

    position: absolute;

    top: 8px;

    left: 8px;

    background: linear-gradient(135deg, #f97316, #ef4444);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    padding: 4px 10px;

    border-radius: 4px;

}



.es-short-info {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 12px;

    color: #fff;

}



.es-short-title {

    font-size: 13px;

    margin: 0 0 4px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.es-short-author {

    font-size: 12px;

    color: rgba(255,255,255,0.7);

}



/* ----------------------------------------------------------------------------

   LIVE CARDS

   ---------------------------------------------------------------------------- */

.es-live-card {

    cursor: pointer;

}



.es-live-thumb {

    position: relative;

    aspect-ratio: 16/9;

    overflow: hidden;

    border-radius: 8px 8px 0 0;

}



.es-live-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-live-badge-big {

    position: absolute;

    top: 12px;

    left: 12px;

    background: #ef4444;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    padding: 4px 12px;

    border-radius: 4px;

    display: flex;

    align-items: center;

    gap: 6px;

}



.es-live-badge-big i {

    font-size: 8px;

    animation: pulse-live 1.5s infinite;

}



.es-live-viewers {

    position: absolute;

    bottom: 8px;

    left: 8px;

    background: rgba(0,0,0,0.8);

    color: #fff;

    font-size: 12px;

    padding: 4px 10px;

    border-radius: 4px;

}



.es-live-started {

    position: absolute;

    bottom: 8px;

    right: 8px;

    background: rgba(0,0,0,0.8);

    color: #888;

    font-size: 11px;

    padding: 4px 8px;

    border-radius: 4px;

}



.es-live-info {

    display: flex;

    gap: 12px;

    padding: 12px;

}



.es-live-avatar {

    position: relative;

    flex-shrink: 0;

}



.es-live-avatar img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

}



.es-avatar-live {

    position: absolute;

    bottom: 0;

    right: 0;

    width: 12px;

    height: 12px;

    background: #ef4444;

    border: 2px solid var(--es-bg-secondary, #1a1a1a);

    border-radius: 50%;

}



.es-live-meta {

    flex: 1;

    min-width: 0;

}



.es-live-title {

    margin: 0 0 4px;

    font-size: 14px;

    font-weight: 600;

    color: var(--es-text-primary, #fff);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.es-live-channel {

    color: var(--es-text-secondary, #888);

    text-decoration: none;

    font-size: 13px;

}



.es-live-category {

    color: var(--es-text-muted, #666);

    font-size: 12px;

    margin-top: 2px;

}



/* ----------------------------------------------------------------------------

   CHANNEL CARDS

   ---------------------------------------------------------------------------- */

.es-channel-card {

    border-radius: 12px;

    overflow: hidden;

}



.es-channel-banner {

    position: relative;

    aspect-ratio: 21/9;

    overflow: hidden;

}



.es-channel-banner img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-channel-type {

    position: absolute;

    top: 8px;

    left: 8px;

    background: rgba(0,0,0,0.7);

    color: #fff;

    font-size: 11px;

    padding: 4px 10px;

    border-radius: 4px;

}



.es-channel-episode-count {

    position: absolute;

    bottom: 8px;

    right: 8px;

    background: rgba(0,0,0,0.7);

    color: #fff;

    font-size: 11px;

    padding: 4px 10px;

    border-radius: 4px;

}



.es-channel-body {

    padding: 16px;

}



.es-channel-avatar {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    overflow: hidden;

    margin-top: -40px;

    border: 4px solid var(--es-bg-secondary, #1a1a1a);

    position: relative;

}



.es-channel-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.es-channel-name {

    margin: 12px 0 4px;

    font-size: 16px;

    font-weight: 600;

    color: var(--es-text-primary, #fff);

}



.es-channel-stats {

    display: flex;

    gap: 16px;

    font-size: 13px;

    color: var(--es-text-secondary, #888);

}



.es-channel-contributors {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 8px;

    font-size: 12px;

    color: var(--es-text-muted, #666);

}



.es-contributor-avatars {

    display: flex;

}



.es-contributor-avatars img {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    border: 2px solid var(--es-bg-secondary, #1a1a1a);

    margin-left: -8px;

}



.es-contributor-avatars img:first-child {

    margin-left: 0;

}



.es-more {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: var(--es-bg-tertiary, #252525);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    margin-left: -8px;

}



.es-channel-revenue {

    margin-top: 16px;

    padding-top: 16px;

    border-top: 1px solid var(--es-border, #333);

}



.es-revenue-label {

    display: block;

    font-size: 12px;

    color: var(--es-text-muted, #666);

}



.es-revenue-amount {

    display: block;

    font-size: 20px;

    font-weight: 700;

    color: var(--es-accent, #00e676);

}



.es-revenue-split {

    font-size: 11px;

    color: var(--es-text-secondary, #888);

}



.es-channel-actions {

    display: flex;

    gap: 8px;

    padding: 0 16px 16px;

}



/* ----------------------------------------------------------------------------

   ARENA CARDS (Coliseums)

   ---------------------------------------------------------------------------- */

.es-arena-card {

    border: 1px solid var(--es-border, #333);

}



.es-arena-header {

    display: flex;

    gap: 12px;

    padding: 16px;

    background: linear-gradient(135deg, var(--arena-color, #f59e0b) 0%, transparent 100%);

    background-size: 200% 100%;

    background-position: right;

}



.es-arena-icon {

    width: 48px;

    height: 48px;

    background: rgba(255,255,255,0.2);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: #fff;

}



.es-arena-title h4 {

    margin: 0;

    font-size: 18px;

    color: #fff;

}



.es-arena-categories {

    font-size: 12px;

    color: rgba(255,255,255,0.7);

}



.es-arena-body {

    padding: 16px;

}



.es-arena-stats {

    display: flex;

    gap: 16px;

    margin-bottom: 16px;

}



.es-arena-stat {

    flex: 1;

    text-align: center;

}



.es-arena-stat-value {

    display: block;

    font-size: 20px;

    font-weight: 700;

    color: var(--es-text-primary, #fff);

}



.es-arena-stat-label {

    font-size: 11px;

    color: var(--es-text-muted, #666);

}



.es-arena-prize {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px;

    background: linear-gradient(135deg, #f59e0b, #b45309);

    border-radius: 8px;

    color: #fff;

    font-weight: 700;

    font-size: 16px;

}



.es-arena-prize i {

    font-size: 18px;

}



.es-arena-leaders {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

    padding-top: 12px;

    border-top: 1px solid var(--es-border, #333);

}



.es-leaders-label {

    font-size: 12px;

    color: var(--es-text-muted, #666);

}



.es-leader-avatars {

    display: flex;

}



.es-leader-avatars img {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: 2px solid var(--es-bg-secondary, #1a1a1a);

    margin-left: -8px;

}



.es-leader-avatars img:first-child {

    margin-left: 0;

}



.es-arena-actions {

    display: flex;

    gap: 8px;

    padding: 0 16px 16px;

}



.es-btn-gold {

    background: linear-gradient(135deg, #f59e0b, #b45309) !important;

    color: #fff !important;

    border: none !important;

}



.es-btn-gold:hover {

    background: linear-gradient(135deg, #fbbf24, #d97706) !important;

}



/* Rank tiers */

.es-tier-bronze { color: #cd7f32; }

.es-tier-silver { color: #c0c0c0; }

.es-tier-gold { color: #ffd700; }

.es-tier-platinum { color: #e5e4e2; }

.es-tier-diamond { color: #b9f2ff; }

.es-tier-legend { color: #ff6b6b; }



/* ----------------------------------------------------------------------------

   NOW PLAYING BAR

   ---------------------------------------------------------------------------- */

.es-now-playing {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--es-bg-secondary, #1a1a1a);

    border-top: 1px solid var(--es-border, #333);

    z-index: 100;

}



.es-np-progress {

    height: 3px;

    background: var(--es-bg-tertiary, #252525);

}



.es-np-progress-bar {

    height: 100%;

    background: var(--es-accent, #00e676);

    width: 35%;

    transition: width 0.1s linear;

}



.es-np-content {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 8px 16px;

}



.es-np-art {

    width: 56px;

    height: 56px;

    border-radius: 4px;

    object-fit: cover;

}



.es-np-info {

    flex: 1;

    min-width: 0;

}



.es-np-title {

    display: block;

    font-weight: 600;

    color: var(--es-text-primary, #fff);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.es-np-artist {

    font-size: 13px;

    color: var(--es-text-secondary, #888);

}



.es-np-controls {

    display: flex;

    gap: 8px;

}



.es-np-btn {

    background: transparent;

    border: none;

    color: var(--es-text-primary, #fff);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.2s ease;

}



.es-np-btn:hover {

    background: var(--es-bg-hover, #333);

}



.es-np-play {

    background: var(--es-accent, #00e676);

    color: #000;

}



.es-np-play:hover {

    background: #00c864;

}



.es-np-time {

    font-size: 13px;

    color: var(--es-text-secondary, #888);

    min-width: 100px;

}



.es-np-volume {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--es-text-secondary, #888);

}



.es-np-volume input[type="range"] {

    width: 80px;

}