/* ──────────────────────────────── TwXstars v21.0 – NO WOBBLE & TIGHT UI ──────────────────────────────── */
:root {
    --bg-void: #050505;
    --bg-onyx: #121212;
    --bg-glass: rgba(18, 18, 18, 0.9);
    --text-mist: #e5e7eb;
    --text-ash: #737373;
    --accent: #3b82f6;
    --accent-glow: rgba(59, 130, 246, 0.4);
}

/* ───── GLOBAL RESET (WOBBLE KILLER) ───── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* CRITICAL: Kills horizontal scroll */
    background-color: var(--bg-void);
    color: var(--text-mist);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    margin: 0; padding: 0;
    -webkit-text-size-adjust: 100%;
}

/* ───── HEADER ───── */
.nav-bar {
    background: var(--bg-glass);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    position: sticky; top: 0; z-index: 100;
    padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; align-items: center; height: 48px;
}
.logo { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: #fff; text-decoration: none; }
.logo span { color: var(--accent); }

/* ───── CONTAINER ───── */
.container-max {
    max-width: 1800px;
    margin: 0 auto;
    padding: 4px;
    width: 100%;
}

/* ───── MEDIA STAGE (Black Box) ───── */
.media-stage {
    position: relative;
    background-color: #000;
    width: 100%;
    height: 60vh; 
    min-height: 300px; max-height: 800px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px; /* Tighter gap to info */
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 600px) {
    .media-stage { 
        border-radius: 0; 
        width: 100vw; /* Force full width */
        margin-left: -4px; /* Counteract container padding */
        height: 55vh; 
    }
}

.main-player, .main-image {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; display: block;
}

/* ───── UP NEXT (MINIMALIST PILL) ───── */
.up-next-pill {
    position: absolute;
    bottom: 20px; /* Floating inside player */
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 6px 16px 6px 6px; /* Tighter padding */
    border-radius: 30px;
    display: flex; align-items: center; gap: 10px;
    color: white; text-decoration: none;
    z-index: 20;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.up-next-pill.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Ring Animation */
.ring-loader { position: relative; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.ring-svg circle {
    fill: none; stroke: var(--accent); stroke-width: 3;
    stroke-dasharray: 100; stroke-dashoffset: 100;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
}
.ring-icon { position: absolute; font-size: 10px; color: white; margin-left: 1px; }

.pill-text { display: flex; flex-direction: column; text-align: left; }
.pill-label { font-size: 9px; text-transform: uppercase; color: #999; letter-spacing: 0.5px; line-height: 1; margin-bottom: 2px; }
.pill-action { font-size: 12px; font-weight: 700; color: #fff; line-height: 1; }

/* ───── COMPACT META CARD (Tight Spacing) ───── */
.media-meta-card {
    background: var(--bg-onyx);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 12px; /* Reduced padding */
    margin-bottom: 20px;
}

/* Header Row */
.info-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; /* Tight gap */
}

.author-group { display: flex; flex-direction: column; line-height: 1.1; }
.author-name { font-size: 15px; font-weight: 700; color: white; text-decoration: none; }
.author-handle { font-size: 11px; color: var(--text-ash); }

/* X Button */
.btn-x-view {
    display: flex; align-items: center; gap: 5px;
    background: #000; color: #fff; border: 1px solid #333;
    padding: 5px 10px; border-radius: 6px;
    font-size: 11px; font-weight: 700; text-decoration: none;
}
.btn-x-view svg { width: 12px; height: 12px; fill: currentColor; }

/* Caption (Compact) */
.caption-full {
    font-size: 13px;
    line-height: 1.4; /* Tighter lines */
    color: #ccc;
    margin-bottom: 10px;
    word-wrap: break-word;
}
.caption-full a { color: var(--accent); text-decoration: none; font-weight: 500; }

/* Subscription Alert */
.sub-alert {
    display: block; text-align: center;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: var(--accent); font-size: 12px; font-weight: 600;
    padding: 8px; border-radius: 6px; text-decoration: none;
    margin-bottom: 10px;
}

/* Stats (Tight) */
.stats-bar {
    display: flex; align-items: center; gap: 12px;
    padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 11px; color: var(--text-ash); font-weight: 500;
}
.stat-date { margin-left: auto; }

/* ───── MASONRY GRID ───── */
.masonry-grid {
    column-count: 2; column-gap: 4px;
    column-fill: balance; display: block; width: 100%;
}
@media (min-width: 768px) { .masonry-grid { column-count: 5 !important; } }

/* Cards */
.card {
    display: inline-block; width: 100%;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    background-color: var(--bg-onyx);
    border-radius: 6px; overflow: hidden;
    margin-bottom: 8px !important; position: relative; transform: translate3d(0,0,0);
}
.card-link { display: block; text-decoration: none; }

.aspect-box { position: relative; width: 100%; background-color: #1a1a1a; display: block; }
.card-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.card-img.loaded { opacity: 1; }

/* Small Grid Captions */
.meta-strip { padding: 6px 8px; background: var(--bg-onyx); }
.caption-text {
    font-size: 11px; color: #999; line-height: 1.25; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
pointer-events: none; /* Lets the click pass through to the card link */
}
.caption-text a { color: var(--accent); text-decoration: none; }
pointer-events: auto; /* Re-enable clicks just for links */
}

.play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.play-icon-glass { width: 32px; height: 32px; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; }
.play-icon-glass svg { width: 12px; height: 12px; fill: white; margin-left: 2px; }

/* ───── UTILS ───── */
.ad-card { border: 1px solid rgba(59, 130, 246, 0.2); }
.ad-badge { position: absolute; top: 5px; right: 5px; background: var(--accent); color: white; font-size: 9px; font-weight: 700; padding: 2px 4px; border-radius: 3px; z-index: 10; }
.text-accent { color: var(--accent); }

.loader-area { display: block; width: 100%; text-align: center; padding: 20px 0; clear: both; }
.pulse-spinner { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin: 0 auto; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:.5;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

.page-indicator { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.05); color: var(--text-mist); padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* ──────────────────────────────── UP NEXT OVERLAY v2.0 ──────────────────────────────── */
.up-next-layer {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
}
.up-next-layer.visible { opacity: 1; pointer-events: auto; }

/* The Card */
.next-card {
    width: 80%;
    max-width: 320px;
    background: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.up-next-layer.visible .next-card { transform: translateY(0); }

/* Image Area */
.next-thumb-box {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
}
.next-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.8;
}
.next-play-btn {
    position: absolute; inset: 0; margin: auto;
    width: 48px; height: 48px;
    background: rgba(59, 130, 246, 0.9); /* Accent color */
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}
.next-play-btn svg { fill: white; width: 20px; height: 20px; margin-left: 3px; }

/* Info Area */
.next-info { padding: 16px; text-align: center; }
.next-label {
    font-size: 10px; text-transform: uppercase; color: #888; letter-spacing: 1px;
    margin-bottom: 6px; display: block;
}
.next-title {
    font-size: 14px; font-weight: 700; color: white;
    margin-bottom: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Progress Button */
.cancel-btn {
    background: transparent; border: 1px solid rgba(255,255,255,0.2);
    color: #aaa; font-size: 12px; padding: 8px 16px;
    border-radius: 20px; cursor: pointer;
    transition: all 0.2s;
}
.cancel-btn:hover { background: rgba(255,255,255,0.1); color: white; }

/* Ring Animation for Countdown */
.countdown-ring { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; }
.countdown-circle {
    fill: none; stroke: #fff; stroke-width: 3;
    stroke-dasharray: 100; stroke-dashoffset: 0;
    transform: rotate(-90deg); transform-origin: 50% 50%;
}
.animate-ring { animation: dash 5s linear forwards; }
@keyframes dash { to { stroke-dashoffset: 100; } }