/* Reset and Core Styles */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    body {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background-image: url('bodyy.png');
        color: #666666;
        padding: 8px;
        text-align: center;
    }
    
    /* Link Styles with Smooth Transition */
    a { 
        color: #ACABAB; 
        text-decoration: none; 
        transition: all 0.25s ease-in-out;
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; /* Prevents long titles from breaking layout */
    }
    a:vlink { color: #FF0000; }
    a:alink { color: #EEEEEE; }
    
    /* Modern Link & Button Animations */
    a:hover { 
        color: #ffffff !important; 
        transform: scale(1.05);
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    }

    /* Layout Wrapper */
    .main-container {
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
    }

    /* Adaptive Top Banner */
    .top-banner {
        display: block;
        margin-bottom: 20px;
        width: 100%;
    }
    .top-banner-img {
        width: 100%;
        max-width: 756px;
        height: auto;
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .top-banner:hover .top-banner-img {
        transform: scale(1.02);
    }

    /* FIXED: Always 3 columns, even on tiny screens */
    .grid-container {
        background-color: #000000;
        border-radius: 12px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.7);
        padding: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Forces 3 fluid columns permanently */
        gap: 8px; /* Slightly tighter gap to save space on mobile */
        text-align: center;
        width: 100%;
    }

    /* Rubber Thumb (Card) Specifications */
    .grid-col {
        background: #0d0d0d;
        padding: 10px 5px;
        border-radius: 8px;
        border: 0px solid #1a1a1a;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: hidden;
        width: 100%;
    }
    
    .grid-col:hover {
        transform: translateY(-5px);
        background: #141414;
        border-color: #ff0055;
        box-shadow: 0 10px 20px rgba(255, 0, 85, 0.2);
    }

    /* Fully Elastic Image Zoom Wrapper */
    .img-wrap {
        display: block;
        overflow: hidden;
        border-radius: 6px;
        margin-bottom: 8px;
        width: 100%;
        max-width: 210px;
        margin-left: auto;
        margin-right: auto;
    }
    .grid-col img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.4s ease;
    }
    
    .grid-col:hover img {
        transform: scale(1.08); 
    }

    /* Responsive text adjustments inside thumbs */
    .grid-col h2 {
        font-size: calc(11px + 0.4vw); /* Adapts fluidly to device width */
        font-weight: normal;
        line-height: 1.6;
        margin-top: 10px;
    }
    .grid-col .thumb-title {
        font-size: calc(11px + 0.4vw);
    }
    
    .badge-new {
        font-size: calc(10px + 0.3vw);
        color: #ff0055;
        font-weight: bold;
        display: inline-block;
        animation: pulse 1.5s infinite;
    }
    @keyframes pulse {
        0% { opacity: 0.6; }
        50% { opacity: 1; transform: scale(1.05); }
        100% { opacity: 0.6; }
    }

    .counter-text {
        font-size: calc(9px + 0.2vw);
        color: #EEEEEE;
        display: block;
        margin-bottom: 4px;
    }

    /* Pagination Buttons with Color Flow Effect */
    .pagination-box {
        margin: 25px auto 20px auto;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: 756px;
    }
    .page-btn {
        background: linear-gradient(135deg, #141414, #262626, #141414);
        background-size: 200% 100%;
        color: #ACABAB !important;
        padding: 6px 10px;
        font-weight: bold;
        font-size: 13px;
        border: 1px solid #333333;
        border-radius: 6px;
        text-shadow: none !important;
        transition: transform 0.2s ease-in-out, border-color 0.2s, box-shadow 0.2s;
        animation: gradientShift 4s linear infinite;
    }
    
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        100% { background-position: 200% 50%; }
    }

    .page-btn:hover {
        background: linear-gradient(135deg, #ff0055, #7a00ff, #ff0055);
        background-size: 200% 100%;
        animation: gradientShift 1.5s linear infinite;
        color: #ffffff !important;
        border-color: #ffffff;
        box-shadow: 0 0 15px rgba(255, 0, 85, 0.6);
        transform: translateY(-4px) scale(1.12);
    }

    /* Styled Footer Components */
    .promo-title {
        font-size: 20px;
        color: #ffffff;
        margin: 20px 0 15px 0;
        display: block;
    }
    .promo-title a {
        color: #ffffff !important;
    }
    .promo-title a:hover {
        color: #ff0055 !important;
        text-shadow: 0 0 8px rgba(255, 0, 85, 0.6);
    }
    
    .footer-container {
        background-color: #0d0d0d;
        border: 1px solid #1a1a1a;
        border-radius: 12px;
        box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
        padding: 20px 15px;
        max-width: 756px;
        margin: 0 auto 30px auto;
        text-align: center;
    }

    .footer-content {
        font-size: 12px;
        color: #888888;
        line-height: 1.6;
    }
    .footer-content strong {
        color: #ffffff;
    }
    .footer-content a {
        color: #ff0055;
        text-decoration: none;
        font-weight: 500;
    }
    .footer-content a:hover {
        color: #ffffff !important;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        text-decoration: underline;
    }
    
    .footer-links-row {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #1a1a1a;
    }
    .footer-links-row a {
        margin: 0 6px;
    }

    .tags-box {
        margin: 20px 0;
    }
    .tags-box a {
        font-size: 15px;
        color: #ffffff;
    }
    .tags-box a:hover {
        color: #ff0055 !important;
    }
    .copyright-text {
        font-size: 12px; 
        color: #666666;
        display: block;
        margin-top: 5px;
    }

    .rta-banner {
        margin-top: 20px;
        display: inline-block;
        transition: transform 0.2s ease;
    }
    .rta-banner:hover {
        transform: scale(1.08);
    }
    .rta-banner img {
        border-radius: 4px;
        max-width: 100%;
        height: auto;
    }