/* ========================================
   RESET & VARIABLES
   ======================================== */

/* Import YouTube's Roboto Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Brand Colors */
    --primary-red: #E31E24;
    --primary-red-dark: #C01217;
    --accent-gold: #FFD700;

    /* Neutral Colors */
    --white: #FFFFFF;
    --gray-100: #F1F3F5;
    --gray-400: #CED4DA;
    --gray-800: #343A40;
    --gray-900: #212529;
    --black: #0a0a0a;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #E31E24 0%, #9D0F13 100%);
    --gradient-dark: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95));

    /* Typography - YouTube uses Roboto */
    --font-primary: 'Roboto', sans-serif;
    --font-display: 'Roboto', sans-serif;

    /* Spacing - Optimized for Compactness */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* UI Elements */
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
    --header-height: 140px;
}

/* ========================================
   BASE STYLES
   ======================================== */

body {
    font-family: var(--font-primary);
    background-color: var(--black);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ========================================
   BACKGROUND
   ======================================== */

.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #050505;
    overflow: hidden;
}

.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(80px);
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: float 20s ease-in-out infinite;
    will-change: transform;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-red);
    top: -100px;
    left: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: #500;
    bottom: -100px;
    right: -100px;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px;
    height: 300px;
    background: var(--accent-gold);
    top: 40%;
    left: 60%;
    opacity: 0.2;
    animation-delay: -10s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

/* Mobile Performance Optimization */
@media (max-width: 600px) {
    .gradient-orb {
        filter: blur(60px);
        /* Reduced from 100px */
    }

    .glass-overlay {
        backdrop-filter: blur(40px);
        /* Reduced from 80px */
    }
}

/* ========================================
   APP CONTAINER
   ======================================== */

.app-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
    position: relative;
    z-index: 10;
}

/* ========================================
   HEADER & SEARCH
   ======================================== */

.app-header {
    margin-bottom: var(--spacing-md);
    /* Reduced from lg */
}

.brand-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.brand-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.brand-tagline {
    font-size: 0.85rem;
    color: var(--gray-400);
    margin-top: 2px;
}

.search-wrapper {
    position: sticky;
    top: var(--spacing-sm);
    z-index: 100;
}

.search-bar {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.search-bar:focus-within {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(227, 30, 36, 0.15);
}

.search-icon {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
}

.search-bar input {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1rem;
    width: 100%;
    outline: none;
    font-family: var(--font-primary);
}

.search-bar input::placeholder {
    color: var(--gray-400);
}

/* ========================================
   HERO SECTION (LATEST VIDEO)
   ======================================== */

.hero-section {
    margin-bottom: 24px;
    /* Compacted spacing */
    /* Optimized spacing */
}

/* Hero Carousel Wrapper */
.hero-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 20px;
    /* Space for shadow/interaction */
    -webkit-overflow-scrolling: touch;

    /* Bleed effect: Pull to edges of screen, overriding container padding */
    margin-left: calc(var(--spacing-md) * -1);
    margin-right: calc(var(--spacing-md) * -1);
    padding-left: var(--spacing-md);
    /* Start content aligned */
    padding-right: var(--spacing-md);
    /* End content aligned */

    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.hero-scroll-wrapper::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

.hero-card {
    min-width: 93%;
    /* Larger card, minimal peek for next */
    width: 93%;
    scroll-snap-align: center;
    text-decoration: none;
    /* Remove blue underline */
    color: var(--white);
    /* Ensure text is white */

    background: rgba(20, 20, 20, 0.6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: var(--spacing-sm);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-red);
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(227, 30, 36, 0.4);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 30, 36, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(227, 30, 36, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(227, 30, 36, 0);
    }
}



.hero-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.3);
}

.hero-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
}

.hero-thumb-wrapper {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* Strict 16:9 Aspect Ratio */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.hero-card:hover .hero-bg-img {
    transform: scale(1.05);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.hero-card:hover .play-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.play-button-large {
    width: 80px;
    height: 80px;
    background: rgba(227, 30, 36, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(227, 30, 36, 0.4);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-card:hover .play-button-large {
    transform: scale(1.1);
    background: #FF0000;
}

.play-button-large svg {
    width: 40px;
    height: 40px;
    color: white;
    margin-left: 4px;
}

.hero-info {
    padding: 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.02), transparent);
}

.hero-title {
    font-family: var(--font-primary);
    /* YouTube uses standard font for titles too */
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: 6px;
    /* Remove absolute positioning styles */
    text-shadow: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-meta {
    font-size: 0.85rem;
    color: #aaa;
    font-weight: 400;
}

.hero-duration {
    bottom: 12px;
    right: 12px;
    font-size: 0.9rem;
    padding: 3px 8px;
    z-index: 2;
}

/* ========================================
   VIDEO GRID (SHORTS vs LONGS)
   ======================================== */

.grid-section {
    margin-bottom: var(--spacing-sm);
    /* Reduced from lg */
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-md);
}

.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
}

.view-all {
    font-size: 0.85rem;
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}

/* Horizontal Scroll Container for Shorts */
.videos-grid-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.videos-grid-scroll::-webkit-scrollbar {
    height: 6px;
}

.videos-grid-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.videos-grid-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.videos-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Expanded Vertical Grid */
.videos-grid-expanded {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.video-thumb-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* Shorts in Horizontal Scroll */
.videos-grid-scroll .video-thumb-card {
    flex: 0 0 140px;
    min-width: 140px;
}

/* Shorts in Expanded Grid */
.videos-grid-expanded .video-thumb-card {
    flex: 0 1 calc(33.33% - 12px);
    min-width: 100px;
}

/* Long videos (for search results) */
.video-thumb-card.is-long {
    flex: 0 1 calc(50% - 12px);
    min-width: 150px;
}

.video-thumb-card:active {
    transform: scale(0.98);
}

.thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    /* Vertical for Shorts */
    background: var(--gray-800);
    overflow: hidden;
    border-radius: var(--radius-md);
}

.video-thumb-card.is-long .thumb-wrapper {
    aspect-ratio: 16/9;
    /* Horizontal for Long videos */
}

.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-thumb-card:hover .thumb-img {
    transform: scale(1.05);
}

/* YouTube-style Duration Badge */
.duration-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-primary);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.card-info {
    padding: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

.card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--white);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

/* YouTube-style metadata (views + date) */
.card-meta {
    font-size: 0.75rem;
    color: #aaa;
    font-weight: 400;
    line-height: 1.4;
}

/* Ver Mais Button */
.ver-mais-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--white);
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ver-mais-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-red);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.2);
}

.ver-mais-btn:active {
    transform: translateY(0);
}

/* ========================================
   STICKY FOOTER
   ======================================== */

.sticky-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background: rgba(20, 20, 20, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 8px 8px 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.subscribe-fab {
    background: var(--white);
    color: var(--black);
    font-weight: 700;
    font-family: var(--font-display);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.subscribe-fab:active {
    transform: scale(0.95);
}

.subscribe-fab svg {
    width: 18px;
    height: 18px;
    color: var(--primary-red);
}

.social-mini-row {
    display: flex;
    gap: 4px;
    padding-right: 8px;
}

.social-mini-row a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    border-radius: 50%;
    transition: all 0.2s;
}

.social-mini-row a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.social-mini-row svg {
    width: 20px;
    height: 20px;
}

/* ========================================
   HEADER SPONSOR BUTTON
   ======================================== */

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-md);
    gap: 10px;
}

/* Override brand-row margin since it's now inside header-top-row */
.brand-row {
    margin-bottom: 0;
}

/* Sponsor Button Animation */
@keyframes superbet-attention {
    0% {
        border-color: var(--accent-gold);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
        transform: scale(1);
    }

    50% {
        border-color: var(--primary-red);
        box-shadow: 0 0 15px 4px rgba(227, 30, 36, 0.4);
        transform: scale(1.05);
    }

    100% {
        border-color: var(--accent-gold);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
        transform: scale(1);
    }
}

.sponsor-btn-header {
    background: var(--white);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Base Box Shadow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    max-width: 120px;
    flex-shrink: 0;

    /* Animation Properties */
    border: 2px solid var(--accent-gold);
    animation: superbet-attention 1.5s infinite ease-in-out;
}

.sponsor-btn-header:hover {
    /* Pause animation on hover if desired, or enhance it. 
       Let's keep it simple and just let existing hover effects work on top or blend in.
       Actually, standard hover conflict might occur with animation.
       Let's override hover to be consistent or just let the animation run.
    */
    animation-play-state: paused;
    border-color: var(--primary-red);
    transform: scale(1.08);
    /* Slightly larger than the pulse peak */
    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.4);
}

.sponsor-logo-header {
    width: 100%;
    height: auto;
    max-height: 24px;
    object-fit: contain;
}

/* Responsive adjustment for sponsor button */
@media (max-width: 480px) {
    .sponsor-btn-header {
        padding: 6px 12px;
        max-width: 100px;
    }
}

/* ========================================
   FOOTER
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================
   FOOTER
   ======================================== */

.app-footer {
    margin-top: 24px;
    padding-bottom: 30px;
    text-align: center;
    /* Removed padding-left/right to match content width */
}

/* ========================================
   PULL TO REFRESH
   ======================================== */
.ptr-spinner {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--accent-gold);
    animation: spin 1s ease-in-out infinite;
    z-index: 1000;
    transition: top 0.3s ease;
}

.ptr-spinner.visible {
    top: 20px;
}

@keyframes spin {
    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

.footer-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin-bottom: var(--spacing-md);
    /* Reduced spacing */
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    /* Compact padding */
    border-radius: 12px;
    /* Matching cards (Not pills) */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.action-btn:active {
    transform: scale(0.98);
}

.participate-btn {
    background: var(--gradient-primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(227, 30, 36, 0.3);
    border: none;
}

.participate-btn:hover {
    box-shadow: 0 8px 25px rgba(227, 30, 36, 0.5);
    transform: translateY(-2px);
}

.participate-btn svg {
    width: 20px;
    height: 20px;
}

.subscribe-main-btn {
    background: #fff;
    color: #000;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    /* Removed specific margin-bottom to use standard 8px */
}

.subscribe-main-btn:hover {
    background: #f0f0f0;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.subscribe-main-btn svg {
    color: #FF0000;
    width: 24px;
    height: 24px;
}

.contact-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.contact-btn {
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 16px;
    gap: 16px;
    height: auto;
    width: 100%;
    border-radius: 12px;
    margin-bottom: 0;
}

.contact-btn svg {
    width: 24px;
    height: 24px;
    color: var(--gray-400);
    flex-shrink: 0;
}

.contact-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.contact-btn:hover svg {
    color: var(--white);
}

.contact-btn::before {
    display: none;
}

.contact-info-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--accent-gold);
    margin-bottom: 2px;
    line-height: 1;
}

.btn-value {
    display: block;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
}

.contact-btn::after {
    display: none;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
    /* Reduced spacing */
}

.social-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--gray-400);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icon:hover {
    background: var(--white);
    color: var(--black);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.social-icon.instagram:hover {
    color: #E1306C;
}

.social-icon.tiktok:hover {
    color: #00f2ea;
}

.social-icon.facebook:hover {
    color: #1877F2;
}

.social-icon.youtube:hover {
    color: #FF0000;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.copyright {
    color: var(--gray-600);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    padding-bottom: 10px;
    /* Minimal space for safe area */
    display: block;
}

/* ========================================
   UTILITIES & ANIMATIONS
   ======================================== */

.hidden {
    display: none;
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Skeleton Loading */
.loading-skeleton {
    display: contents;
}

.skeleton-card {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
    animation: shimmer 1.5s infinite;
    flex: 1 1 45%;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Responsive Tweaks */
@media (min-width: 600px) {
    .contact-row {
        /* Keep column layout on desktop as requested */
        flex-direction: column;
        gap: 8px;
    }

    .contact-btn {
        width: 100%;
    }

    .video-thumb-card.is-short {
        flex: 0 1 calc(25% - 12px);
        /* 4 shorts per row on desktop */
    }
}

/* ========================================
   SHORTS STYLE CARDS (YOUTUBE CLONE)
   ======================================== */

.video-thumb-card {
    /* Reset padding/bg from potentially old styles if any */
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    /* Let absolute elem be contained by inner */
    width: 160px;
    /* Standard Short width mobile */
    min-width: 140px;
    /* Prevent too small shrinking */
    flex: 0 0 auto;
    position: relative;
    border-radius: 12px;
    margin-right: 0;
    /* Handled by gap in container */
}

/* Adjust for expanded grid */
.videos-grid-expanded .video-thumb-card {
    width: 100%;
    /* Take full column width */
}

.shorts-card-inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 177.77%;
    /* 9:16 Aspect Ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2a;
    transition: transform 0.2s ease;
}

.video-thumb-card:active .shorts-card-inner {
    transform: scale(0.98);
}

.shorts-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shorts-overlay-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

.shorts-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    z-index: 2;
}

.shorts-title {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 4px;

    /* Max 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Light drop shadow text */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.shorts-views {
    font-family: 'Roboto', sans-serif;
    font-size: 0.75rem;
    color: #ddd;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.shorts-menu-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 0.9;
    z-index: 3;
}