/* ==========================================
   🕹️ CLEAN TRIVIA ENGINE (No Video Overlay)
   ========================================== */

/* 🎡 THE WHEEL SPIN */
#wheel-element.spinning {
    transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1) !important;
    transform: rotate(1440deg) !important;
}

/* ❓ THE TRIVIA QUESTION BOX */
#cruise-overlay {
    background: rgba(15, 15, 15, 0.98) !important;
    border: 2px solid #ffc107 !important;
    border-radius: 20px !important;
    z-index: 9999 !important;
    padding: 2rem !important;
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
}

/* 🟢 Ensure the Main Stage stays black for the game, not the camera */
.cruise-container {
    background: #000 !important;
    position: relative;
}

/* Hide any Agora players that might be trying to force-start */
#local-player, #remote-player-list {
    display: none !important;
}

/* --- FINAL STABLE POST ARCHITECTURE --- */
.uniform-post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e1e8ed !important;
    border-radius: 15px;
}

.media-window {
    position: relative; /* Essential for Audio Overlay */
    height: 450px !important;
    width: 100% !important;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: none !important;
}

/* Forces image to fill the 450px window perfectly */
.media-window img, 
.media-window video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fills window edge-to-edge */
    border: none !important;
    box-shadow: none !important;
}

/* --- FLOATING AUDIO PLAYER --- */
.audio-player-overlay {
    position: absolute;
    bottom: 20px;
    width: 90%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.3); /* Glass effect */
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.post-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #fff;
    border-top: 1px solid #f1f1f1;
}

.shared-badge {
    background-color: #f0f2f5;
    border: 1px solid #dee2e6;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #65676b;
    display: inline-flex;
    align-items: center;
}

/* Target the specific container from your XPath */
div > div > div > div > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px; /* Forces it to occupy space */
    object-fit: contain;
    background-color: transparent !important;
}

/* Ensure the wrapper isn't collapsing */
.swiper-slide, .slide, .image-container {
    height: 100% !important;
    min-height: 400px;
}

@keyframes dm-glow-pulse {
    0% { filter: drop-shadow(0 0 2px #0dcaf0); transform: scale(1); }
    50% { filter: drop-shadow(0 0 10px #0dcaf0); transform: scale(1.15); }
    100% { filter: drop-shadow(0 0 2px #0dcaf0); transform: scale(1); }
}

.glow-active {
    animation: dm-glow-pulse 1.5s infinite ease-in-out !important;
    color: #0dcaf0 !important;
    display: inline-block !important;
}

.btn-primary:hover {
    transform: scale(1.05);
    transition: 0.2s ease-in-out;
}

/* Profile Picture (DP) */
.profile-img {
    width: 150px;
    height: 150px;
    object-fit: cover; /* Crops image to fill circle without stretching */
    border-radius: 50%;
}

/* Post Images to fit window */
.post-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Fullscreen/Modal Image fit */
.full-window-img {
    width: 100vw;
    height: 100vh;
    object-fit: contain; /* Shows entire image within the window bounds */
}

/* 🛑 STOP THE MOTORS FROM STRETCHING THE PAGE */
canvas { 
    max-height: 250px !important; /* Forces the charts to stay small */
    width: 100% !important;
}

#chat-messages {
    height: 50vh !important; /* Keeps chat from growing infinitely */
    overflow-y: auto !important;
}

#remote-video-container {
    height: 400px !important;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
/* 🧊 STABILIZE THE LEADERBOARD */
.leaderboard-box, .leaderboard-container {
    max-height: 60vh !important;
    overflow-y: auto !important;
    display: block !important;
}

/* Nuke any invisible loading screens that might be freezing the UI */
.loading-overlay, .modal-backdrop, #loader {
    display: none !important;
    pointer-events: none !important;
}

/* Ensure the Wheel/Room content is actually on a clickable layer */
.cruise-room-content, .wheel-container {
    position: relative;
    z-index: 10; 
}


/* 📱 ICON ALIGNMENT FIX */
.bottom-nav {
    display: flex !important;
    justify-content: space-evenly !important; 
    align-items: center !important;
}

/* ============================================================
   🕹️ SNIPP-CRUISE GAME ENGINE STYLES
   ============================================================ */

/* 🎡 THE WHEEL SPIN ANIMATION */
#wheel-element.spinning {
    transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1) !important;
    transform: rotate(1440deg) !important; /* 4 full rotations */
}

/* ❓ THE TRIVIA QUESTION OVERLAY (Kills the Black Screen) */
#cruise-overlay {
    background: rgba(15, 15, 15, 0.98) !important;
    border: 2px solid #ffc107 !important;
    border-radius: 20px !important;
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.4) !important;
    padding: 2.5rem !important;
    z-index: 9999 !important; /* Forces it above the video player */
    max-width: 500px;
}

/* 🕹️ SOLO MODE UI TWEAKS */
.badge-solo {
    background: #6c757d;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 🔘 TRIVIA BUTTON HOVER EFFECTS */
#options-container button {
    transition: all 0.2s ease-in-out !important;
    border-width: 2px !important;
}

#options-container button:hover {
    background-color: #ffc107 !important;
    color: #000 !important;
    transform: translateY(-2px);
}

/* 👤 THE FINAL BOSS DP FIX */
.profile-dp-window {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 4px solid #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.profile-dp-img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important; /* 🚀 FORCES FILL */
    object-position: center !important;
    display: block !important;
}

/* ✅ THE MASTER CAROUSEL BLOCK (Swipeable + Square + No Black Bars) */
.media-viewport {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;     /* 📸 Forces the square look */
    background-color: #000;
    display: flex !important;           /* ⚡ Lined up in a row */
    flex-wrap: nowrap !important;       /* No stacking */
    overflow-x: auto !important;        /* 🔓 Restores the swipe */
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none;              /* Hide scrollbar */
    -webkit-overflow-scrolling: touch;
}

/* 1. THE TRACK (Add this) */
.media-scroll-wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* ⚡ Crucial for "snapping" to each photo */
    scrollbar-width: none;         /* Hide for Firefox */
    height: 100%;
    width: 100%;
}

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

/* 2. THE SLIDE (Updated to merge both) */
.slide-container {
    flex: 0 0 100% !important;     /* 📏 Each slide is exactly 100% */
    width: 100%;
    height: 100%;
    scroll-snap-align: start;      /* ⚡ Snaps perfectly into place */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;            /* Keeps floating buttons relative to this box */
}

/* 3. THE MEDIA (Keep your existing cropping logic) */
.slide-container img, 
.slide-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;  /* ✂️ Still fills the square perfectly */
    object-position: center !important;
}
/* 1. Target the specific Bootstrap row/col that holds your posts */
.feed-container .row, 
.feed-container .col, 
.feed-container [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Remove all internal space from the glass container itself */
.glass-container {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important; /* Clips the post content to the glass corners */
}

/* 3. Ensure the media inside (Snipp) spans 100% width */
.glass-container img, 
.glass-container video,
.post-content {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}
/* 1. THE ICON FIX (Brings back the Camera & Snipp text) */
.fa-camera, .fa-solid, .fas {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    visibility: visible !important;
}
nav.fixed-bottom, footer {
    z-index: 10000 !important;
    background: rgba(0, 0, 0, 0.9) !important; /* Dark background so white icon pops */
}

/* 1. THE DEFINITIVE EDGE-TO-EDGE & ALIGNMENT FIX */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden !important;
    }

    /* Stretch content to absolute left of glass */
    .main-feed-container, 
    .post-wrapper, 
    .post-container, 
    .feed-wrapper,
    .container, .container-fluid, .row, .col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
    }

    /* 2. SLIM WHITE GLASS BAR (Replaces the thick black bar) */
    .post-footer { 
        background: rgba(255, 255, 255, 0.95) !important; /* Bright, semi-transparent */
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0,0,0,0.05);
        padding: 6px 12px !important; /* Slimmer height */
        display: flex !important;
        justify-content: space-around !important; /* Spreads icons evenly */
        align-items: center !important;
        min-height: 45px !important;
    }

    /* 3. ICON VISIBILITY & ALIGNMENT */
    .post-footer i, 
    .post-footer a, 
    .post-footer span { 
        color: #444 !important; /* Dark icons so they are clearly seen */
        font-size: 1.1rem !important;
        display: flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    /* Special fix for the dark Repost text */
    .repost-count {
        color: #666 !important;
        font-size: 0.85rem;
        margin-left: 4px;
    }
}
/* 📱 SLIDE-UP TRAY (INSTAGRAM STYLE) */
.comment-tray-overlay {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); 
    z-index: 2000;
    display: flex; 
    align-items: flex-end; 
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
    
    /* 🚀 FIX: This makes your icons clickable again when the tray is closed */
    pointer-events: none; 
}

.comment-tray-overlay.show {
    visibility: visible !important;
    opacity: 1 !important;
    
    /* 🚀 FIX: This makes the tray clickable again when it is open */
    pointer-events: auto; 
}

.comment-tray-content {
    width: 100%; 
    height: 80vh;
    background: #ffffff !important; /* 🚀 FORCES WHITE - Prevents black box */
    border-radius: 25px 25px 0 0; 
    transform: translateY(100%); 
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    display: flex; 
    flex-direction: column;
    z-index: 2001;
    overflow: hidden;
}

.comment-tray-overlay.show .comment-tray-content {
    transform: translateY(0) !important;
}

.tray-handle {
    width: 40px; height: 5px; background: #ccc;
    border-radius: 10px; margin: 12px auto; cursor: pointer;
}

.tray-scroll-area {
    flex-grow: 1; overflow-y: auto;
    padding: 0 15px 100px 15px; 
    -webkit-overflow-scrolling: touch;
    background: #ffffff !important; /* Ensure the scroll area stays white */
}
/* ==========================================================================
   🚢 SNIPPCRUISE PREMIUM EFFECTS
   ========================================================================== */

/* ⛽ The "Low Fuel" Warning: Container shakes when under 20% */
.fuel-danger {
    animation: fuel-shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ⏱️ Timer Pulse: Gold glowing effect for the active timer */
.pulse-timer {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    animation: timer-glow 2s infinite;
    border: 1px solid #FFD700 !important;
}

/* 📊 Progress Bar: Smooth "Liquid" Growth */
#goal-progress {
    transition: width 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* 🎁 Gift Card Interaction */
.gift-card-hover {
    transition: all 0.3s ease;
    cursor: pointer;
}

.gift-card-hover:hover {
    background: rgba(255, 193, 7, 0.1);
    border-color: #ffc107 !important;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.2);
}

.gift-card-hover:active {
    transform: scale(0.95);
}

/* --- Keyframes --- */

@keyframes fuel-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
    40%, 60% { transform: translate3d(3px, 0, 0); }
}

@keyframes timer-glow {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
/* THE ULTIMATE MOBILE OVERRIDE */
@media (max-width: 768px) {
    /* 1. Force the container to the absolute left edge */
    .main-content, .container, .feed-wrapper, .post-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* 2. KILL THE BLACK BAR & MAKE IT SLIM WHITE */
    .post-footer, .vibe-container, .action-bar {
        background-color: rgba(255, 255, 255, 0.98) !important; /* Force White */
        background: white !important; /* Backup for older phones */
        border-top: 1px solid #eee !important;
        padding: 5px 0 !important; /* Make it very slim */
        margin: 0 !important;
        display: flex !important;
        justify-content: space-around !important;
        height: 50px !important;
    }

    /* 3. MAKE ICONS VISIBLE (Dark on White) */
    .post-footer i, .post-footer a, .post-footer span,
    .vibe-container i, .vibe-container a {
        color: #222 !important; /* Dark Grey/Black */
        font-size: 1.2rem !important;
    }
}
/* FORCE VISIBILITY FOR MISSING BUTTONS */
.user-stats, .follow-tabs, .action-buttons {
    display: flex !important; /* Forces them to show up */
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 10px;
}

/* Fix for Camera & Share Arrow Icons */
.post-footer .fa-camera, .post-footer .fa-paper-plane, .post-footer .fa-retweet {
    display: inline-block !important;
    visibility: visible !important;
    color: #222 !important; /* Dark color for white bar */
    padding: 0 15px;
}
/* ============================================================
   MOBILE 'GLASS EDGE' & POST TRIM FIX
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Stretch content to the glass edges */
    .container, .container-fluid, main.container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 2. Remove side borders from posts to let them 'bleed' to the edge */
    .uniform-post-card {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        margin-bottom: 8px !important; /* Tightens the gap between posts */
        background: #fff;
    }

    /* 3. The 'Trim White' Icon Bar - Neat Alignment */
    .uniform-post-card .p-3 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        background: #ffffff !important;
        border-top: 1px solid #f1f1f1; /* Subtle line separating image from icons */
    }

    /* 4. Align icons in a neat horizontal line */
    .interaction-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 20px !important; /* Space between Like, Comment, Share */
    }

    /* 5. Fix the 'Wobble' */
    body {
        overflow-x: hidden !important;
    }
}

/* 6. ADMIN PAGE RECOVERY */
/* Ensures buttons are clickable and not blocked by phantom layers */
#admin-wrapper, .admin-content, .compare-container {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    /* A. Force Edge-to-Edge Spread */
    .container, .main-container, main {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* B. Fix the Post Footer (The 'Trim') */
    .uniform-post-card .p-3 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        background: #ffffff !important; /* Kills the black background issue */
    }

    /* C. Un-hide the Icons (Camera, Share, etc.) */
    .interaction-bar, .d-flex.gap-3 {
        gap: 12px !important; /* Tightens space so they fit on one line */
        display: flex !important;
        flex-wrap: nowrap !important; /* Prevents icons from dropping to a second hidden line */
        align-items: center !important;
    }

    .interaction-bar i {
        font-size: 1.2rem !important; /* Slightly smaller for mobile fit */
    }

    /* D. Fix Slide-up Comment Tray Visibility */
    .comment-tray-content {
        background: #ffffff !important;
        color: #333 !important;
    }
    
    /* Ensure the input box inside the tray is visible */
    .comment-input-wrapper {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 10px;
        border-top: 1px solid #eee;
        display: block !important;
    }
}
/* Ensure the Post Card fills the space but stays contained */
.post-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 15px;
    box-sizing: border-box; /* Prevents padding from pushing width out */
}

/* The Bottom Icon Row - Spread them evenly */
.post-actions {
    display: flex;
    justify-content: space-between; /* This spreads icons evenly */
    align-items: center;
    width: 100%;
    padding-top: 10px;
}

/* Ensure icons don't vanish on mobile */
@media (max-width: 768px) {
    .post-actions {
        padding: 10px 5px;
    }
    .post-actions i {
        font-size: 1.2rem; /* Make icons touch-friendly */
    }
}
/* --- THE POST CARD (GLASS CONTAINER) --- */
.post-card {
    width: 100% !important;
    max-width: 100vw !important; /* Forces it to stay within the viewport */
    margin: 10px 0 !important;   /* Removes side margins that push it off-center */
    padding: 15px !important;
    box-sizing: border-box !important; /* Includes padding in the width calculation */
    overflow: hidden; /* Prevents internal elements from "leaking" out */
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1); /* Assuming your glass effect */
    backdrop-filter: blur(10px);
}

/* --- THE ICON ROW (FOOTER) --- */
.post-footer-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Spreads from far left to far right */
    align-items: center !important;
    width: 100% !important;
    padding: 12px 5px !important; /* Small side padding so icons don't touch the glass edge */
    margin-top: 15px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box !important;
}

/* --- ICON SPACING --- */
.post-footer-actions > * {
    flex: 1; /* Gives every icon equal "territory" */
    text-align: center;
    display: flex;
    justify-content: center;
}

/* --- MOBILE SPECIFIC OVERRIDE --- */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden; /* Prevents the whole site from wobbling left/right */
    }

    .post-card {
        width: 98vw !important; /* Almost full width */
        margin-left: 1vw !important; /* Perfect centering */
        padding: 10px !important;
        border-radius: 10px; /* Slightly sharper for mobile */
    }

    .post-footer-actions i {
        font-size: 1.4rem !important; /* Bigger icons for easier tapping */
    }
}
/* ☢️ THE ATOMIC COLUMN FORCER */

/* 1. Kill Flexbox on the main containers */
main.container, 
.row, 
.main-feed-container,
[class*="col-"] {
    display: block !important; /* Blocks cannot sit side-by-side */
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* 2. Force the Post Card to be the center of the world */
.uniform-post-card, .post-container {
    display: block !important;
    width: 95% !important; /* Leaves a tiny margin on mobile */
    max-width: 500px !important; /* Stays professional on Laptop */
    margin: 0 auto 50px auto !important; /* The 'Lovely' White Gap */
    background: #000 !important;
    border-radius: 20px;
    border: none !important;
    position: relative !important;
    left: 0 !important;
}

/* 3. Handle the Laptop View specifically */
@media (min-width: 992px) {
    main.container {
        max-width: 550px !important; /* Squeezes the 'hallway' so only 1 post fits */
    }
    .media-viewport {
        height: 750px !important;
    }
}

/* 4. Fix the Bottom Nav (Tiny White Touch) */
.bottom-nav {
    display: flex !important; /* Nav still needs flex to sit icons side-by-side */
    flex-direction: row !important; 
    background: #ffffff !important;
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
}
/* 1. The Main Tray Container */
.comment-tray {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 75vh;
    background: #fff;
    z-index: 2000;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.comment-tray.active {
    bottom: 0;
}

/* 2. Keeps content tidy on larger screens */
.comment-tray-inner {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 3. Backdrop to dim the screen when tray is open */
.tray-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1999;
    display: none;
}

.tray-backdrop.active {
    display: block;
}