/* style.css - Solid, Slower Ghost Pops & Thank You Button */


:root {
    --bg-color: #111;
    --text-color: #eee;
    --bar-height: auto;
    
    /* Variables */
    --thumb-scale: 1.03; 
	--thumb-category-y: 1.01;
    --image-scale: 1.05;
    --hover-scale: 1.2; 
    --link-hover-scale: 1.2;
    --audio-hover-scale: 1.1;
    --fs-hover-scale: 1.05; 
    
    /* Category Column Width */
    --col-width: 25vw;
}


body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace; 
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}


a { color: inherit; text-decoration: none; }


/* HIDE SCROLLBARS */
#main-stage-container, .blog-view, #main-stage { -ms-overflow-style: none; scrollbar-width: none; }
#main-stage-container::-webkit-scrollbar, .blog-view::-webkit-scrollbar, #main-stage::-webkit-scrollbar { display: none; }


/* --- TOP BAR --- */
#top-bar {
    background: #000;
    display: flex;
    flex-direction: column; 
    padding: 10px 20px;
    z-index: 20; /* Higher than thank-you pop */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    flex-shrink: 0; 
}


.bar-row-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.bar-right { display: flex; align-items: center; gap: 20px; order: 2; }


/* Modified Left Bar for Logo + Text */
.bar-left { 
    order: 1; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
}


/* LOGO ANIMATION WRAPPER */
#logo-wrapper {
    display: block;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    transform-origin: center;
}


#logo-wrapper:hover {
    transform: scale(var(--hover-scale)); 
    z-index: 100;
}


#logo-wrapper.active-pop {
    animation: pop-grid 0.3s forwards !important; 
}


#logo { 
    height: 40px; 
    display: block; 
}


#thank-you-text { font-size: 0.8em; color: #aaa; max-width: 200px; line-height: 1.2; }


#site-title {
    order: 3;
    width: 100%;
    text-align: center;
    font-weight: bold; 
    font-size: 1.2em; 
    margin-top: 5px; 
}


/* --- CATEGORY NAV STRIP --- */
#category-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    min-height: 0;
}


.nav-item-rect {
    height: 24px;
    min-width: 120px;
    padding: 0 10px;
    background-size: cover;
    background-position: center;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #444;
    color: #bbb;
    font-size: 0.8em;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    transition: all 0.2s ease;
}


.nav-item-rect:hover {
    transform: scale(1.05);
    color: #fff;
    border-color: #fff;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 8px rgba(255,255,255,0.3);
    z-index: 10;
}


.nav-text { position: relative; z-index: 2; pointer-events: none; }


#controls { display: flex; gap: 10px; align-items: center; font-size: 0.8em; }
.control-btn {
    background: #333; border: 1px solid #555; color: #fff;
    cursor: pointer; padding: 5px 10px; font-family: inherit; min-width: 80px; 
}
.control-btn:hover { background: #555; }
.vol-wrapper { display: flex; align-items: center; gap: 5px; }


/* --- RESPONSIVE MOBILE OPTIMIZATIONS --- */
@media (max-width: 850px) {
    #top-bar { 
        padding: 8px 12px; 
    }

    .bar-row-top { 
        flex-direction: row; /* Keep as a row */
        flex-wrap: wrap;     /* Allow buttons to drop to a second line */
        align-items: center;
        justify-content: space-between; /* Push logo left, title right */
        gap: 5px;
    }

    /* Section 1: Logo & Thank You Text */
    .bar-left { 
        order: 1;            /* First in line */
        width: auto;         /* Only take as much space as needed */
        flex: 0 1 auto;
        justify-content: flex-start;
        gap: 8px;
    }
    
    #logo { height: 28px; }  /* Slightly smaller for side-by-side fit */

    #thank-you-text {
        font-size: 0.65em;   /* Shrink text so it doesn't crowd the title */
        max-width: 100px;    /* Prevent text from pushing title off-screen */
        line-height: 1.1;
    }

    /* Section 2: Site Title (Now next to logo) */
    .bar-center { 
        order: 2;            /* Second in line */
        width: auto;         /* Allow it to sit next to the logo */
        flex: 1;             /* Take up remaining middle space */
        text-align: right;   /* Align text to the right to contrast the logo */
        margin: 0; 
    }

    #site-title {
        font-size: 0.95em;   /* Scale down slightly to ensure it fits */
        margin: 0;
    }

    /* Section 3: Controls (Drop to new line) */
    .bar-right { 
        order: 3;            /* Move to the bottom */
        width: 100%;         /* Force it to take the full width (new line) */
        justify-content: center; 
        padding-top: 8px;    /* Add a little space above the buttons */
        border-top: 1px solid #222; /* Optional: subtle separator */
    }

    .control-btn {
        padding: 4px 6px;
        min-width: 60px;
        font-size: 0.7em;
    }

    .vol-wrapper { font-size: 0.7em; }
    #vol-slider { width: 50px; }

    /* Category Navigation */
    #category-nav {
        margin-top: 10px;
        gap: 4px;
    }

    .nav-item-rect { 
        height: 20px; 
        min-width: 60px; 
        font-size: 0.65em; 
    }
}

/* Extra compact fix for very small screens */
@media (max-width: 400px) {
    #thank-you-text { display: none; } /* Only show Logo and Title to save space */
    #site-title { font-size: 0.85em; }
}


/* --- BOTTOM BAR --- */
#bottom-bar {
    height: 60px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 0 20px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    flex-shrink: 0;
    font-size: 0.85em;
    color: #aaa;
}


#stats-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    font-weight: bold;
    text-align: center;
}


#stats-click-text {
    color: #fff;
    transition: color 0.2s ease;
}


/* --- MAIN STAGE --- */
#main-stage-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    background: #1a1a1a;
    display: flex; 
}


#main-stage {
    height: 100%; 
    width: 100%;
    box-sizing: border-box;
}


/* --- 1. STANDARD GRID MODE (FLEXBOX) --- */
#main-stage.grid-mode {
    display: flex; 
    flex-wrap: wrap; 
    padding: 20px; 
    gap: 15px;
    justify-content: center; 
    align-content: flex-start;
    overflow-y: auto;
}


#main-stage.grid-mode .grid-cell {
    flex-grow: 1;
    height: 250px;
    min-width: 250px;
    max-width: 500px; 
    position: relative;
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}


#main-stage.grid-mode .grid-cell.type-blog {
    max-width: 800px;
}


/* --- UPDATED: Audio Cells Stack Vertically --- */
#main-stage.grid-mode .grid-cell.type-audio {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    height: 120px; 
    margin-bottom: 5px;
}


/* --- 2. CATEGORY MODE (FIXED WIDTH) --- */
/* UPDATED: Added 20px gap and padding to prevent overlaps during animation */
#main-stage.category-mode {
    display: flex; 
    flex-direction: row; 
    overflow-x: auto;    
    overflow-y: hidden;  
    padding: 40px; 
    gap: 20px;
    justify-content: center; 
}


#main-stage.category-mode .grid-cell.vertical-col {
    flex: 0 0 var(--col-width); 
    width: var(--col-width);
    height: 100%;
    position: relative;
    cursor: pointer;
    border-right: none; 
    transition: width 0.5s ease, flex-basis 0.5s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
    overflow: visible; 
}


@media (max-width: 600px) {
    #main-stage.category-mode .grid-cell.vertical-col { 
        flex: 0 0 80vw; 
        width: 80vw;
    }
}


/* --- INTERACTIONS --- */
.grid-cell:hover { transform: scale(var(--hover-scale)); z-index: 10; }
.grid-cell.type-link:hover { transform: scale(var(--link-hover-scale)); }
.grid-cell.type-audio:hover { transform: scale(var(--audio-hover-scale)); }


#main-stage:hover .grid-cell:not(:hover) { opacity: 0.5; }


/* --- ORGANIC ITEM --- */
.organic-item {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #222;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.grid-mode .organic-item { border-radius: 4px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.grid-cell:hover .organic-item { box-shadow: 0 0 30px rgba(255,255,255,0.2); }


.item-title {
    background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: 20px;
    font-size: 1.2em; pointer-events: none; text-align: center;
}


/* --- COUNTERS --- */
.click-counter {
    position: absolute; color: #fff; font-weight: bold; font-size: 3em; 
    text-shadow: 0 0 10px #000; pointer-events: none; z-index: 9999;
    animation: floatUp 1.5s forwards ease-out;
}
.grid-hover-counter {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-weight: bold; font-size: 3em; 
    text-shadow: 0 0 10px #000; pointer-events: none; z-index: 200;
    animation: popFade 1.2s forwards ease-out;
}


.ghost-click {
    position: absolute; color: #fff; 
    font-weight: bold; font-size: 1.5em; 
    text-shadow: 0 0 10px #000; pointer-events: none; z-index: 10000; 
    opacity: 0.9; 
    animation: popFadeGhost 2.5s forwards ease-out; 
}


@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-80px) scale(1.2); opacity: 0; } }
@keyframes popFade { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(1.5); opacity: 0; } }
@keyframes popFadeGhost { 
    0% { transform: scale(0.5); opacity: 0; } 
    20% { transform: scale(1.0); opacity: 0.9; } 
    100% { transform: translateY(-100px) scale(1.2); opacity: 0; } 
}


/* --- POP CAPTION --- */
.pop-caption {
    position: absolute; transform: translate(-50%, -50%); color: #fff; font-weight: bold; font-size: 2em; 
    text-shadow: 0 0 10px #000, 0 0 20px #000; text-align: center; pointer-events: none; z-index: 10000; width: 80%; 
    animation: caption-float 3s forwards ease-in-out;
}


@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


/* --- ANIMATIONS --- */
@keyframes breathe-thumb { 
	0% { transform: scale(1); } 
	50% { transform: scale(var(--thumb-scale)); } 
	100% { transform: scale(1); } 
}

@keyframes breathe-category { 
    0% { transform: scale(1, 1); } 
    50% { transform: scale(var(--thumb-scale), var(--thumb-category-y)); } 
    100% { transform: scale(1, 1); } 
}

.category-mode .vertical-col .breathing-thumb {
    animation-name: breathe-category;
}

.breathing-thumb { 
	animation: breathe-thumb infinite ease-in-out; 
}
@keyframes breathe-image { 
	0% { transform: scale(1); } 
	50% { transform: scale(var(--image-scale)); } 
	100% { transform: scale(1); } 
}
.breathing-image { 
	animation: breathe-image infinite ease-in-out; 
}


@keyframes pop-grid { 0% { transform: scale(var(--hover-scale)); } 40% { transform: scale(calc(var(--hover-scale) + 0.15)); } 100% { transform: scale(1); } }
.active-pop { animation: pop-grid 0.6s forwards !important; }
.type-link.active-pop { animation: pop-grid 0.6s forwards !important; }


@keyframes pop-fs { 
	0% { transform: scale(var(--fs-hover-scale)); } 
	10% { transform: scale(calc(var(--fs-hover-scale) * 1.03)); } 
	15% { transform: scale(calc(var(--fs-hover-scale) * 1.04)); } 
	60% { transform: scale(calc(var(--fs-hover-scale) * 1.005)); }
	100% { transform: scale(var(--fs-hover-scale)); } 
}


/* --- FULLSCREEN LAYERS --- */
#fs-wrapper { 
	position: relative; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	height: 100%; 
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); 
}

#fs-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#fs-image-container { position: relative; width: 95vw; height: 90vh; }
img.fs-placeholder { width: 100%; height: 100%; object-fit: contain; display: block; filter: blur(10px); transform: scale(1.02); }
img.fs-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease; display: block; }
.center-hovered { transform: scale(var(--fs-hover-scale)); }
#center-zone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; z-index: 200; cursor: pointer; }


/* --- AUDIO PLAYER --- */
.audio-controls { 
	position: absolute; 
	inset: 0; 
	background: rgba(0,0,0,0.6); 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
	opacity: 0; 
	transition: opacity 0.3s; 
}
.grid-cell:hover .audio-controls { 
	opacity: 1; 
}
.audio-playing .audio-controls { 
	opacity: 1 !important; 
	background: rgba(0,0,0,0.4); 
} 


.play-icon { font-size: 40px; margin-bottom: 10px; }
.seek-bar { width: 80%; cursor: pointer; }


/* --- OVERLAY --- */
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s; }
#overlay.hidden { opacity: 0; pointer-events: none; }
#overlay-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }


/* --- BLOG --- */
.blog-view { max-width: 800px; padding: 40px; color: #fff; line-height: 1.6; font-size: 1.1em; overflow-y: auto; max-height: 90vh; }
.blog-view h1 { color: #aaa; border-bottom: 1px solid #333; padding-bottom: 10px; }
.blog-image-wrapper { width: 60%; margin: 30px auto; position: relative; cursor: pointer; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.blog-image-wrapper:hover { transform: scale(var(--hover-scale)); z-index: 100; }
.blog-image-wrapper img { width: 100%; height: auto; border: 1px solid #333; display: block; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: box-shadow 0.3s ease; }
.blog-image-wrapper:hover img { box-shadow: 0 0 30px rgba(255,255,255,0.2); }


/* --- NAV --- */
.nav-zone { position: absolute; top: 0; bottom: 0; width: 15%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: #fff; cursor: pointer; z-index: 500; opacity: 0; transition: opacity 0.3s ease-in-out; background: transparent; }
.nav-zone:hover { opacity: 1; }
.nav-zone.hidden-nav { display: none !important; }
#nav-prev { left: 0; } #nav-next { right: 0; }
.nav-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(15px); transform: scale(1.2); opacity: 0.6; z-index: -1; }
.nav-arrow { position: relative; text-shadow: 0 0 10px #000; z-index: 10; }
.contact-view { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; }
.contact-view img { margin-top: 20px; border: 1px solid #333; width: 60%; height: auto; }


/* --- WARNING SCREEN --- */
#warning-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 20000; /* Extremely high to cover everything */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hidden-warning {
    display: none !important;
}

#warning-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- SHARED FULLSCREEN STYLES (Gallery & Thank You) --- */
#fs-wrapper, #ty-wrapper { 
    position: relative; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	width: 100%; 
	height: 100%; 
	cursor: default;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
#fs-wrapper.active-pop-fs, #ty-wrapper.active-pop-fs { 
	animation: pop-fs 1s forwards !important; 
	transition: none; 
}

#fs-inner, #ty-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

#fs-image-container, { 
position: relative; 
width: 95vw; 
height: 90vh; }

.center-hovered { transform: scale(var(--fs-hover-scale)); }

#center-zone, #ty-center-zone { 
    position: absolute; 
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%); 
    width: 80%; 
	height: 80%; 
	z-index: 200; 
	cursor: pointer; 
}

/* Reusing existing .fs-placeholder and .fs-full from previous turn... */

/* --- WARNING SCREEN --- */
#warning-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#warning-screen.hidden-warning { display: none !important; }
#warning-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }


#welcome-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none; /* This makes the image ignore clicks */
}
/* Live Message Button */
#live-msg-trigger {
    cursor: pointer;
    transition: transform 0.2s;
}
#live-msg-trigger:hover { transform: scale(1.1); }
#live-msg-trigger img { height: 40px; display: block; }

/* Message Input Modal */
#message-input-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.hidden-msg { display: none !important; }

#message-box {
    background: #222; padding: 20px; border: 1px solid #444; border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5); text-align: center;
}
#live-text-input {
    background: #000; border: 1px solid #555; color: #fff;
    padding: 10px; width: 300px; font-family: inherit; outline: none;
}

/* The Broadcasted Floating Message */
.live-broadcast-msg {
    position: fixed; transform: translate(-50%, -50%);
    color: #ff008a; font-weight: bold; font-size: 3.6em;
    text-shadow: 0 0 10px #000, 0 0 5px #000;
    text-align: center; pointer-events: none; z-index: 150000;
    width: 60%; animation: liveMsgFade 10s forwards linear;
}

@keyframes liveMsgFade {
    0% { opacity: 0; transform: translate(-50%, -40%); }
    5% { opacity: 1; transform: translate(-50%, -50%); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -60%); }
}

/* Fix for the 3-section bottom bar */
#bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.bottom-left {
    flex: 1; /* Takes up 1/3 space */
    display: flex;
    align-items: center;
    gap: 20px;
}

.bottom-right {
    flex: 1; /* Takes up 1/3 space */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* Ensure the center button doesn't stretch and stays in the middle */
#live-msg-trigger {
    flex: 0 0 auto; 
    z-index: 30;
}

/* Make sure the click text looks good on the left */
#stats-click-text {
    color: #fff;
    font-weight: bold;
    min-width: 80px;
}

/* --- DOWNLOAD BUTTON --- */
.dl-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.75em;
    text-decoration: none;
    z-index: 5000;
    transition: background 0.2s, color 0.2s, border 0.2s;
    backdrop-filter: blur(5px);
    pointer-events: auto; 
}

.dl-button:hover {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-color: #fff;
}

/* Thank You Pop */
.thank-you-image-pop {
    position: fixed;
    top: 60px; 
    left: 0;
    width: 100%; 
    height: calc(100vh - 60px - 60px); 
    z-index: 15; 
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    animation: fadeIn 0.3s ease-out;
}

.thank-you-image-pop img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#ty-image-container {
    position: relative;
    width: 85vw;   /* Slightly smaller than gallery */
    height: 85%;   /* Slightly smaller than gallery */
    margin: 0 auto; /* FORCES horizontal centering */
}

.thank-you-image-pop .caption-text {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffeb3b;
    font-size: 3em; 
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 20px #000, 0 0 10px #000;
    width: 80%;
    pointer-events: none; 
    z-index: 300;
}

.thank-you-caption-floating {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffeb3b;
    font-size: 4em; /* Slightly larger for impact */
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 20px #000, 0 0 10px #000, 0 0 40px rgba(0,0,0,0.8);
    width: 90%;
    pointer-events: none; /* Allows user to click "through" the text to the image */
    z-index: 100001; /* Above Top Bar and Image Pop */
    animation: ty-caption-pulse 4s forwards ease-in-out;
}

@keyframes ty-caption-pulse {
    0% { opacity: 0; scale: 1; }
    10% { opacity: 1; scale: 1; }
    20% { scale: 1.0; }
    80% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -100%); }
}

/* Ensure the Thank You pop-up is below the Top Bar (z-index 20) and Captions */
.thank-you-image-pop {
    z-index: 15; 
}

/* --- OWNER REACTION POP --- */
.owner-reaction-pop {
    position: fixed;
    transform: translate(-50%, -50%);
    color: #ff008a; /* Bright Pink */
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 5em;
    text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 10px #ff008a;
    pointer-events: none;
    z-index: 200000;
    white-space: nowrap;
    animation: owner-pop-anim 4s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes owner-pop-anim {
    0% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.2); 
    }
    10% { 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.2); 
    }
    15% { 
        transform: translate(-50%, -50%) scale(1); 
    }
    80% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -150%) scale(0.8); 
    }
}

/* Make it slightly smaller on mobile */
@media (max-width: 600px) {
    .owner-reaction-pop { font-size: 2.5em; }
}

#request-trigger {
    cursor: pointer;
    transition: transform 0.2s;
    background: #222;
    border: 1px solid #444;
    border-radius: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
#request-trigger:hover {
    transform: scale(1.1);
    background: #333;
    border-color: #666;
}
.request-icon { line-height: 1; }

/* Bold Pink Instruction Pop */
.ghost-instruction {
    position: fixed; /* Changed to fixed so it floats over the whole site */
    bottom: 150px;   /* Start higher up from the bottom bar */
    left: 50%;
    transform: translateX(-50%);
    color: #ff008a;  /* Bright Pink */
    font-size: 5em;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: -2px; /* Tighter look for large text */
    text-transform: uppercase;
    pointer-events: none;
    z-index: 200000; /* Above everything */
    white-space: nowrap;
    
    /* Stronger Glow to make it pop against any background */
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.8), 
                 0 0 20px rgba(255, 0, 138, 0.6);
                 
    animation: instruction-float-up 5s forwards cubic-bezier(0.1, 0.5, 0.1, 1);
}

@keyframes instruction-float-up {
    0% { 
        opacity: 0; 
        transform: translate(-50%, 80px) scale(0.8); 
    }
    10% { 
        opacity: 1; 
        transform: translate(-50%, 0) scale(1); 
    }
    85% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -200px) scale(1.1); /* Floats up 200px */
    }
}

/* Mobile Fix: Scale down the massive font so it doesn't wrap */
@media (max-width: 800px) {
    .ghost-instruction { font-size: 2.5em; }
}