/**
 * Scryde X Template - Custom Styles
 * All styles that were previously inline in JavaScript have been moved here
 */

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ========================================
   0. Font Face Definitions
   ======================================== */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Ranking styles moved to ranking-styles.css */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.woff2') format('woff2');
    font-weight: 600; /* Using Bold as 600/700 fallback */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raritas';
    src: url('../fonts/Raritas-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raritas';
    src: url('../fonts/Raritas-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raritas';
    src: url('../fonts/Raritas-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Raritas';
    src: url('../fonts/Raritas-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/lobster-regular-webfont.woff2') format('woff2'), url('../fonts/lobster-regular-webfont.woff') format('woff');
}


/* ========================================
   1. Language Dropdown Styles
   ======================================== */
.language-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(24, 7, 7, 0.95);
    border: 1px solid rgba(240, 103, 6, 0.3);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 120px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.language-dropdown.active {
    display: block;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #fff0d4;
}

.language-option:hover {
    background: rgba(240, 103, 6, 0.2);
}

.language-option.selected {
    background: rgba(240, 103, 6, 0.3);
}

.language-option span:first-child {
    font-size: 18px;
}

/* ========================================
   2. Scroll Progress Bar Styles
   ======================================== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #f06706 0%, #1acd81 100%);
    width: 0%;
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* ========================================
   3. Mobile Menu Styles
   ======================================== */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 998;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-panel {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    max-width: 90vw;
    height: 100%;
    background: #180707;
    border-right: 1px solid rgba(240, 103, 6, 0.3);
    transition: left 0.3s ease;
    z-index: 999;
    padding: 24px;
    overflow-y: auto;
}

.mobile-menu-panel.active {
    left: 0;
}

.mobile-menu-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-panel nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 48px;
}

.mobile-nav-link {
    color: #fff;
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease;
}

.mobile-nav-link:hover {
    color: #f06706;
}

/* ========================================
   4. Header & Navigation Adjustments
   ======================================== */
/* Hide desktop nav on mobile */
@media (max-width: 991px) {
    .sc-cc289c3f-6.bqfZKj {
        display: none;
    }
    
    /* Hide desktop right-side elements (Language + Download) on mobile to prevent overlap */
    .sc-cc289c3f-10.frmTmn {
        display: none !important;
    }
    
    .sc-cc289c3f-0.HuFbN {
        padding: 0 16px;
        height: 60px;
        justify-content: center; /* Center content vertically if needed */
    }
    
    /* Social Links Mobile Adjustment - Hide Sidebar to match reference */
    .sc-dbda52be-0.kjYnLK {
        display: none !important;
    }
}

/* Mobile Header Bar - Dark Background like reference */
.mobile-header-bar {
    display: none;
    align-items: center;
    justify-content: flex-end; /* Align button to right */
    padding: 0 16px;
    height: 60px;
    background-color: #180707; /* Dark background matches reference */
    width: 100%;
    box-sizing: border-box; /* Fix horizontal overflow */
}

/* Mobile Menu Button - Orange Gradient like reference */
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    color: #000; /* Black text on orange button */
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    
    /* Orange Gradient Background */
    background: radial-gradient(128% 100% at 50% 0%, #ffc470 2.6%, #9e3d0e 57.29%, #ff8717 100%);
    box-shadow: 
        0 11.019px 19.912px 0 rgba(240, 103, 6, 0.14),
        0 6.548px 10.83px 0 rgba(240, 103, 6, 0.11),
        0 3.4px 5.525px 0 rgba(240, 103, 6, 0.09),
        0 1.385px 2.77px 0 rgba(240, 103, 6, 0.07),
        0 0.315px 1.338px 0 rgba(240, 103, 6, 0.04);
        
    border-radius: 16px;
    padding: 8px 20px; /* Adjusted padding */
    height: 40px; /* Fixed height */
    min-width: 100px;
}

.mobile-menu-btn .button-text {
    /* Gradient Text effect for "Menu" if needed, or just black/white */
    /* Reference text seemed to have gradient? Let's check text color. 
       Reference dump said color: rgb(0,0,0). So black text? 
       Wait, the "Download Game" button had gradient text.
       The "Menu" button in reference dump had color: rgb(0,0,0).
    */
    color: #fff0d4; /* Let's use the cream color or gradient text if possible. 
                      The 'Download' button has gradient text. 
                      Let's stick to simple readable for now or try to match exactly.
                      Reference dump said color: rgb(0, 0, 0). 
                      But usually these buttons have white/cream text. 
                      Let's use #fff0d4 to be safe and readable on orange? 
                      Wait, orange background is bright. #9e3d0e is dark orange.
                      Reference dump color: rgb(0, 0, 0). Black?
                      Let's look at the screenshot I took? I can't see it.
                      I will trust the dump color: rgb(0,0,0) or maybe it's transparent?
                      Actually, let's look at the "Download Game" button CSS in index.html.
                      .ccrgqk .button-text span { background: linear-gradient(...) }
                      Let's apply similar text style.
    */
    position: relative;
    z-index: 2;
    font-family: 'Raritas', sans-serif; /* Match header font */
    letter-spacing: 1px;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .mobile-header-bar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0; /* Ensure full width */
        right: 0;
        z-index: 1000; /* Below logo (1001) */
    }
}

/* ========================================
   5. Countdown Styles (Replicating Reference)
   ======================================== */
/* Global Styles for Countdown Elements */
.sc-2d55dcca-0 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
    max-width: 800px; /* Increased max-width */
}

/* Header: "SINCE THE START OF CHAPTER 2" */
.sc-2d55dcca-0 .sc-66573e97-1 {
    font-family: 'Raritas', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #fff0d4 !important;
    text-align: center;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Container for all countdown items */
.sc-2d55dcca-1 {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    width: 100%;
}

/* Individual Item Container */
.sc-2d55dcca-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

/* Label: "days", "hours", etc. */
.sc-2d55dcca-2 .sc-8343b55e-0 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 240, 212, 0.7) !important;
    text-transform: lowercase !important; /* Force lowercase if HTML isn't updated, but we will update HTML */
    letter-spacing: 1px;
    margin: 0 !important;
    /* Removed order: -1 as label is now after number in HTML */
}

/* Box/Wrapper for Number and Label */
.sc-2d55dcca-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 240, 243, 0.1) !important;
    border-radius: 4px !important;
    width: 125px !important;
    height: 100px !important; /* Increased height to fit both */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Number Text */
.sc-2d55dcca-4 {
    font-family: 'Manrope', sans-serif !important;
    font-size: 64px !important; /* Slightly smaller to fit label */
    font-weight: 600 !important;
    color: #fff8ed !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Mobile Adjustments for Countdown */
@media (max-width: 991px) {
    .sc-2d55dcca-0 {
        margin-top: 16px;
        gap: 12px;
    }

    .sc-2d55dcca-1 {
        gap: 12px;
        justify-content: center;
    }
    
    /* Box size - square-ish on mobile like reference */
    .sc-2d55dcca-3 {
        width: 68px !important;
        height: 68px !important;
        padding: 0 !important;
    }
    
    /* Number size */
    .sc-2d55dcca-4 {
        font-family: 'Manrope', sans-serif !important;
        font-size: 24px !important;
        line-height: 24px !important;
        font-weight: 700 !important;
    }
    
    /* Label size */
    .sc-2d55dcca-2 .sc-8343b55e-0 {
        font-size: 10px !important; /* Smaller label */
        font-weight: 500 !important;
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }

    
    /* Header size - Keep large on mobile */
    .sc-2d55dcca-0 .sc-66573e97-1 {
        font-size: 20px !important;
        line-height: 24px !important;
        max-width: 300px; /* Prevent overflow */
        margin-bottom: 8px;
    }
}

/* ========================================
   6. Custom Fixes & Adjustments
   ======================================== */
/* Fix mobile horizontal overflow caused by fixed-width elements */
@media (max-width: 991px) {
    .jhmixX {
        width: 100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
        background-size: contain !important;
        max-width: 100vw !important;
        overflow: hidden;
    }
    
    /* Ensure other potentially wide elements are contained */
    .eBSjaL, .kNKNeu {
        max-width: 100% !important;
    }
}

/* Improve desktop character image clarity */
/* Move the blurred background glow (.hvlPud) behind the video (.ftqFfw) */
.hvlPud {
    z-index: -2 !important;
    pointer-events: none;
}

.ftqFfw {
    z-index: -1 !important; /* Keep as background but above the glow */
}

/* Mobile Background Fixes - Match Retro v2 */
@media (max-width: 991px) {
    .ftqFfw {
        display: none !important; /* Hide video background on mobile */
    }
    
    .hvlPud {
        top: initial !important;
        bottom: 0 !important;
        background: linear-gradient(180deg, rgba(24, 7, 7, 0) 0%, rgba(24, 7, 7, 0.75) 50%) !important;
        width: 100% !important;
        height: 50vh !important; /* Approximate height for gradient */
        z-index: 1 !important; /* Ensure it's above other bg elements if needed, or check context */
    }
}

/* Ensure character images in skills section are visible and clear if needed */
.gKvSOq {
    opacity: 1 !important;
}

/* ========================================
   7. Authentication Pages (Login/Register)
   ======================================== */

/* Form Container */
.retro-auth-bg {
    background-image: url('../images/registration-form/background.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

.retro-auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 10;
}

.retro-auth-box {
    background: rgba(24, 7, 7, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 103, 6, 0.3);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.retro-auth-title {
    font-family: 'Raritas', sans-serif;
    font-size: 36px;
    color: #fff0d4;
    text-align: center;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Form Groups */
.retro-form-group {
    margin-bottom: 24px;
    position: relative;
}

.retro-form-label {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: rgba(255, 240, 212, 0.8);
    margin-bottom: 8px;
    font-weight: 500;
}

/* Inputs */
.retro-input {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.retro-input:focus {
    outline: none;
    border-color: #f06706;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(240, 103, 6, 0.2);
}

.retro-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Select */
.retro-select {
    width: 100%;
    height: 48px;
    background: rgba(24, 7, 7, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

/* Checkbox */
.retro-checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.retro-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(240, 103, 6, 0.5);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    appearance: none;
    position: relative;
}

.retro-checkbox:checked {
    background: #f06706;
    border-color: #f06706;
}

.retro-checkbox:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
}

.retro-checkbox-label {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: rgba(255, 240, 212, 0.8);
    cursor: pointer;
}

.retro-checkbox-label a {
    color: #f06706;
    text-decoration: none;
    transition: color 0.2s;
}

.retro-checkbox-label a:hover {
    color: #ff8717;
    text-decoration: underline;
}

/* Submit Button - Reusing or extending existing button styles */
.retro-submit-btn {
    width: 100%;
    height: 56px;
    background: radial-gradient(128% 100% at 50% 0%, #ffc470 2.6%, #9e3d0e 57.29%, #ff8717 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Raritas', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 
        0 11.019px 19.912px 0 rgba(240, 103, 6, 0.14),
        0 6.548px 10.83px 0 rgba(240, 103, 6, 0.11);
}

.retro-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 15px 25px 0 rgba(240, 103, 6, 0.2),
        0 8px 15px 0 rgba(240, 103, 6, 0.15);
}

/* General Link/Button Style */
.retro-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

.retro-btn:hover {
    background: rgba(240, 103, 6, 0.1);
    border-color: rgba(240, 103, 6, 0.3);
    color: #f06706;
    transform: translateY(-2px);
}

.retro-btn i {
    font-size: 16px;
    color: inherit;
    transition: color 0.3s ease;
}

.retro-auth-footer {
    margin-top: 24px;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: rgba(255, 240, 212, 0.6);
}

.retro-auth-footer a {
    color: #f06706;
    text-decoration: none;
    font-weight: 500;
}

.retro-auth-footer a:hover {
    text-decoration: underline;
}

/* Captcha placeholder styling */
.retro-captcha {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.retro-server-feed {
    position: relative;
    z-index: 3;
    padding: 48px 20px 72px;
    background: linear-gradient(180deg, rgba(24, 7, 7, 0.95) 0%, #180707 100%);
}

.retro-server-feed__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 24px;
}

.retro-server-feed__latest,
.retro-server-feed__panel {
    background: rgba(24, 7, 7, 0.85);
    border: 1px solid rgba(240, 103, 6, 0.28);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.retro-server-feed__latest {
    padding: 30px;
}

.retro-server-feed__latest h2 {
    margin: 0 0 20px;
}

.retro-server-feed__news-list {
    display: grid;
    gap: 14px;
}

.retro-server-feed__news-card {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(240, 103, 6, 0.08) 0%, rgba(24, 7, 7, 0.5) 100%);
    overflow: hidden;
}

.retro-server-feed__news-card details {
    display: block;
}

.retro-server-feed__news-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
}

.retro-server-feed__news-summary::-webkit-details-marker {
    display: none;
}

.retro-server-feed__news-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.retro-server-feed__news-title-wrap .sc-66573e97-2 {
    margin: 0;
    color: #ffc94b;
    transition: color 0.2s ease;
}

.retro-server-feed__news-card details[open] .retro-server-feed__news-title-wrap .sc-66573e97-2,
.retro-server-feed__news-summary:hover .retro-server-feed__news-title-wrap .sc-66573e97-2 {
    color: #fff0d4;
}

.retro-server-feed__caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #f8e5b5;
    border-bottom: 2px solid #f8e5b5;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.retro-server-feed__news-card details[open] .retro-server-feed__caret {
    transform: rotate(-135deg);
}

.retro-server-feed__news-body {
    padding: 0 18px 18px;
}

.retro-server-feed__news-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.retro-server-feed__news-card .sc-6436e9a3-0 {
    margin: 10px 0 0;
}

.retro-server-feed__news-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    color: #ffc94b;
    text-decoration: none;
    font-family: 'Raritas', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.retro-server-feed__news-link:hover {
    color: #fff0d4;
}

.retro-server-feed__meta {
    display: inline-block;
    color: rgba(255, 240, 212, 0.58);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

.retro-server-feed__sidebar {
    display: grid;
    gap: 14px;
}

.retro-server-feed__panel {
    padding: 20px;
}

.retro-server-feed__panel h3 {
    margin: 0 0 14px;
}

.retro-server-feed__stats,
.retro-server-feed__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.retro-server-feed__stats li,
.retro-server-feed__items li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.retro-server-feed__stats li:last-child,
.retro-server-feed__items li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.retro-server-feed__stats span,
.retro-server-feed__items span {
    color: rgba(255, 240, 212, 0.85);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.retro-server-feed__stats i,
.retro-server-feed__items i {
    font-style: normal;
    width: 20px;
    text-align: center;
    color: #ffc94b;
    font-size: 15px;
}

.retro-server-feed__stats b,
.retro-server-feed__items b {
    color: #fff0d4;
    font-family: 'Raritas', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    text-align: right;
}

@media (max-width: 1199px) {
    .retro-server-feed__container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991px) {
    .retro-server-feed {
        padding: 24px 14px 40px;
    }

    .retro-server-feed__latest {
        padding: 20px 16px;
    }

    .retro-server-feed__panel {
        padding: 16px;
    }

    .retro-server-feed__news-summary {
        padding: 14px;
    }

    .retro-server-feed__news-body {
        padding: 0 14px 14px;
    }

    .retro-server-feed__news-image {
        height: 150px;
    }
}

/* ========================================
   8. Live Streams Gallery Carousel
   ======================================== */
.retro-live-streams {
    position: relative;
    z-index: 3;
    padding: 24px 20px 5px;
    background: linear-gradient(180deg, rgba(24, 7, 7, 0.95) 0%, rgba(24, 7, 7, 0.98) 100%);
}

.retro-live-streams__container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    background: rgba(24, 7, 7, 0.85);
    border: 1px solid rgba(240, 103, 6, 0.28);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin-bottom: 24px;
}

.retro-live-streams__header {
    padding: 20px 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.retro-live-streams__header h2 {
    margin: 0;
}

.retro-live-streams__track {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 30px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    cursor: grab;
    scroll-behavior: smooth;
}

.retro-live-streams__track::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.retro-live-streams__track.active {
    cursor: grabbing;
    scroll-behavior: auto; /* Disable smooth scroll while dragging */
}

.retro-stream-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 280px;
    background: linear-gradient(180deg, rgba(240, 103, 6, 0.05) 0%, rgba(24, 7, 7, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.retro-stream-card:hover {
    transform: translateY(-5px);
    border-color: rgba(240, 103, 6, 0.5);
    box-shadow: 0 8px 20px rgba(240, 103, 6, 0.15);
}

.retro-stream-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
}

.retro-stream-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevent image dragging issues */
}

.retro-stream-live-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FF002E;
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.retro-stream-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(240, 103, 6, 0.8);
    color: #fff0d4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding-left: 4px; /* visually center the play triangle */
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    backdrop-filter: blur(4px);
}

.retro-stream-card:hover .retro-stream-play-icon {
    opacity: 1;
    background: rgba(240, 103, 6, 1);
    transform: translate(-50%, -50%) scale(1.1);
}

.retro-stream-info {
    padding: 14px 16px;
}

.retro-stream-title {
    margin: 0 0 6px 0;
    color: #fff0d4;
    font-family: 'Raritas', sans-serif;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.retro-stream-author {
    margin: 0;
    color: rgba(255, 240, 212, 0.6);
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

/* Lightbox Styles */
.retro-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.retro-lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.retro-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.retro-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

.retro-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, color 0.2s ease;
    padding: 0;
}

.retro-lightbox-close:hover {
    opacity: 1;
    color: #f06706;
}

.retro-lightbox-video-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #000;
    border: 2px solid rgba(240, 103, 6, 0.5);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    position: relative;
}

#lightbox-twitch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .retro-live-streams {
        padding: 16px 14px 0;
    }
    
    .retro-live-streams__header {
        padding: 16px;
    }
    
    .retro-live-streams__track {
        padding: 16px;
        gap: 14px;
    }
    
    .retro-stream-card {
        flex: 0 0 calc(85% - 14px);
        min-width: 240px;
    }
    
    .retro-stream-title {
        font-size: 14px;
    }
}
/* ========================================
   8. Dashboard/Account Page Styles
   ======================================== */
.retro-dashboard-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px 60px;
}

.retro-dashboard-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

.retro-dashboard-sidebar {
    position: sticky;
    top: 100px;
}

.retro-dashboard-card {
    background: rgba(24, 7, 7, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(240, 103, 6, 0.3);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    margin-bottom: 24px;
}

.retro-profile-header {
    text-align: center;
    margin-bottom: 24px;
}

.retro-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #f06706;
    margin: 0 auto 16px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(240, 103, 6, 0.3);
}

.retro-profile-name {
    font-family: 'Raritas', sans-serif;
    font-size: 24px;
    color: #fff0d4;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.retro-account-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.retro-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 240, 212, 0.7);
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.retro-nav-item i {
    width: 20px;
    text-align: center;
    color: #f06706;
}

.retro-nav-item:hover, .retro-nav-item.active {
    background: rgba(240, 103, 6, 0.15);
    border-color: rgba(240, 103, 6, 0.4);
    color: #fff0d4;
    transform: translateX(5px);
}

.retro-dashboard-content {
    min-height: 500px;
}

.retro-tab-content {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.retro-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.retro-content-title {
    font-family: 'Raritas', sans-serif;
    font-size: 28px;
    color: #fff;
    margin-bottom: 24px;
    border-bottom: 2px solid rgba(240, 103, 6, 0.2);
    padding-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.retro-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.retro-stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.retro-stat-label {
    font-size: 12px;
    color: rgba(255, 240, 212, 0.5);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.retro-stat-value {
    font-family: 'Raritas', sans-serif;
    font-size: 24px;
    color: #f06706;
}

.retro-char-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.retro-char-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.retro-char-card:hover {
    background: rgba(240, 103, 6, 0.1);
    border-color: #f06706;
    transform: scale(1.02);
}

.retro-char-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid rgba(240, 103, 6, 0.3);
}

.retro-char-info h4 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 16px;
}

.retro-char-info p {
    margin: 0;
    color: rgba(255, 240, 212, 0.6);
    font-size: 13px;
}

/* VIP Table Styles */
.retro-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.retro-table th {
    text-align: left;
    padding: 12px;
    color: rgba(255, 240, 212, 0.6);
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.retro-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.retro-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.retro-badge-success { background: rgba(26, 205, 129, 0.2); color: #1acd81; border: 1px solid rgba(26, 205, 129, 0.3); }
.retro-badge-danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

@media (max-width: 991px) {
    .retro-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .retro-dashboard-sidebar {
        position: static;
    }
    .retro-account-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    .retro-nav-item {
        white-space: nowrap;
    }
}

/* Header Account Button */
.header-account-action {
    display: flex;
    align-items: center;
}

.header-account-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0 10px;
    font-family: 'Manrope', sans-serif;
    white-space: nowrap;
}

.header-account-btn:hover {
    background: rgba(240, 103, 6, 0.1);
    border-color: rgba(240, 103, 6, 0.3);
    color: #f06706;
}

.header-account-btn i {
    font-size: 16px;
    color: #f06706;
}

@media (max-width: 991px) {
    .header-account-action {
        display: none;
    }
}