/* ========================================= */
/* GLOBAL STYLE SHEET                        */
/* ========================================= */

:root {
    --ts-water: #4ebbb7;
    --ts-grass: #95c55a;
    --ts-stone: #81a4b5;
    --ts-stone-dark: #58798c;
    --ts-parchment: #e8d7b9;
    --ts-red: #b8334b;
    --ts-outline: #253342; 
    --ts-white: #f4f6f7;
    --ts-steel: #b0c4de;
    
    /* FONT SIZE TIES */
    --fz-xl: 1.8rem;   
    --fz-lg: 1.2rem;   
    --fz-md: 1rem;   
    --fz-sm: 0.9rem;   
    --fz-pixel: 1.4rem; 

    /* SHADOWS */
    --ts-header-shadow: 
        1px  1px 0 var(--ts-outline), 
        1px -1px 0 var(--ts-outline), 
       -1px  1px 0 var(--ts-outline), 
       -1px -1px 0 var(--ts-outline), 
        3px  3px 0px rgba(0, 0, 0, 0.4);

    --ts-label-shadow: 1.5px 1.5px 0px var(--ts-outline);
    --ts-box-shadow: 8px 8px 0px rgba(37, 51, 66, 0.4);
}

/* Base & Background */
body {
    min-height: 100vh;
    background-color: var(--ts-water);
    background-image: url('../img/background/background.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    color: var(--ts-outline);
    overflow: hidden; 
}

/* Universal Rivets */
.rivet {
    position: absolute;
    width: 14px; height: 14px;
    background-color: var(--ts-steel);
    border: 3px solid var(--ts-outline);
    border-radius: 50%;
    z-index: 20;
    box-shadow: inset -3px -3px 0px rgba(0,0,0,0.3), inset 2px 2px 0px rgba(255,255,255,0.4);
}
.r-tl { top: 12px; left: 12px; }
.r-bl { bottom: 12px; left: 12px; }
.r-tr { top: 12px; right: 12px; }
.r-br { bottom: 12px; right: 12px; }

/* Reusable Pixel Buttons (Slim Edition) */
.btn-pixel {
    font-family: 'Chelsea Market', cursive;
    font-size: var(--fz-md);
    padding: 8px 20px;
    border: 2px solid var(--ts-outline);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 4px 0px var(--ts-outline), 0px 8px 12px rgba(0,0,0,0.25);
    transition: transform 0.1s, box-shadow 0.1s;
    background-color: var(--ts-red); 
    color: var(--ts-white); 
    text-shadow: 1.5px 1.5px 0px var(--ts-outline);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.btn-pixel:hover { 
    filter: brightness(1.1); 
    transform: translateY(-1px);
}

.btn-pixel:active { 
    transform: translateY(3px); 
    box-shadow: 0px 0px 0px var(--ts-outline), 0px 2px 5px rgba(0,0,0,0.3); 
}

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: ''; position: absolute; top: -50%; left: -100%; width: 100%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(25deg); animation: shineEffect 4s infinite;
}

@keyframes shineEffect { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }

/* --- NEW: Language Fragments (Moved from index.css) --- */
.lang-fragment {
    position: absolute;
    font-family: 'VT323', monospace;
    font-size: var(--fz-pixel);
    color: var(--ts-white);
    background-color: var(--ts-outline);
    border: 2px solid var(--ts-stone-dark);
    padding: 5px 12px;
    border-radius: 4px;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
    animation: driftParticles 8s ease-in-out infinite alternate;
}

.fragment-c { top: 25%; left: 10%; animation-delay: 0s; }
.fragment-csharp { bottom: 15%; left: 15%; animation-delay: 2s; }
.fragment-java { top: 20%; right: 12%; animation-delay: 4s; }
.fragment-php { bottom: 25%; right: 10%; animation-delay: 1s; }

@keyframes driftParticles {
    from { transform: translate(0, 0) rotate(-5deg); }
    to { transform: translate(20px, -40px) rotate(10deg); }
}

/* ========================================= */
/* GLOBAL BACKGROUND CLOUDS                  */
/* ========================================= */

.cloud-layer-1, .cloud-layer-2, .cloud-layer-3, .cloud-layer-4, .cloud-layer-5, .cloud-layer-6 {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

/* Positions & Images */
.cloud-layer-1 { top: 15%; right: 2%; width: 350px; height: 200px; background-image: url('../img/clouds/Clouds_01.png'); animation: floatCloud 15s ease-in-out infinite; }
.cloud-layer-3 { top: 5%; right: 15%; width: 250px; height: 150px; background-image: url('../img/clouds/Clouds_02.png'); opacity: 0.7; animation: floatCloud 18s ease-in-out infinite 2s; }
.cloud-layer-2 { bottom: 20%; left: 2%; width: 300px; height: 180px; background-image: url('../img/clouds/Clouds_02.png'); opacity: 0.8; animation: floatCloud 20s ease-in-out infinite reverse; }
.cloud-layer-4 { bottom: 5%; left: 10%; width: 400px; height: 220px; background-image: url('../img/clouds/Clouds_01.png'); opacity: 0.5; animation: floatCloud 25s ease-in-out infinite reverse 4s; }
.cloud-layer-5 { top: 25%; left: -400px; width: 350px; height: 180px; background-image: url('../img/clouds/Clouds_05.png'); opacity: 0.6; animation: driftLeftToRight 55s linear infinite; }
.cloud-layer-6 { bottom: 30%; right: -500px; width: 450px; height: 220px; background-image: url('../img/clouds/Clouds_06.png'); opacity: 0.4; animation: driftRightToLeft 70s linear infinite; }

/* Cloud Animations */
@keyframes floatCloud { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(35px); } }
@keyframes driftLeftToRight { 0% { left: -400px; } 100% { left: 100vw; } }
@keyframes driftRightToLeft { 0% { right: -500px; } 100% { right: 100vw; } }

/* --- RESPONSIVE BREAKPOINTS --- */

/* For Tablets and smaller laptops */
@media (max-width: 1200px) {
    .dashboard-body {
        gap: 10px;
        padding: 10px;
    }
    .fb-sidebar-left, .fb-sidebar-right {
        flex: 0 0 250px; /* Shrink sidebars slightly */
        min-width: 250px;
    }
}

/* For Mobile Phones (The big shift) */
@media (max-width: 850px) {
    .dashboard-body {
        flex-direction: column; /* 🎯 Stack elements vertically */
        align-items: center;
    }

    .fb-sidebar-left, .fb-sidebar-right, .fb-feed-center {
        width: 100%; /* Take full width */
        max-width: 100%;
        min-width: unset;
        position: static !important; /* Disable 'sticky' on mobile for better scrolling */
    }

    .fb-sidebar-right {
        order: 3; /* Push stats to the bottom */
    }
}

/* ========================================= */
/* CUSTOM RETRO SCROLLBAR                    */
/* ========================================= */

/* The overall width of the scrollbar */
::-webkit-scrollbar {
    width: 16px;
    height: 16px; 
}

/* The track (background) of the scrollbar */
::-webkit-scrollbar-track {
    background: var(--ts-stone);
    border-left: 3px solid var(--ts-outline);
    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.2);
}

/* The draggable handle (thumb) */
::-webkit-scrollbar-thumb {
    background-color: var(--ts-red);
    border: 3px solid var(--ts-outline);
    border-radius: 6px;
    /* Adds a classic 8-bit bevel effect */
    box-shadow: 
        inset 3px 3px 0px rgba(255, 255, 255, 0.3), 
        inset -3px -3px 0px rgba(0, 0, 0, 0.3);
}

/* Hover state for the thumb */
::-webkit-scrollbar-thumb:hover {
    background-color: #d1415d; /* A slightly brighter red */
    cursor: grab;
}

::-webkit-scrollbar-thumb:active {
    background-color: #a02a3f; /* Darker red when clicked */
    box-shadow: 
        inset 3px 3px 0px rgba(0, 0, 0, 0.4), 
        inset -3px -3px 0px rgba(255, 255, 255, 0.1);
}