/* 1. Global Reset */
html, body {
    margin: 0; padding: 0; height: 100%; width: 100%;
    overflow: hidden; background-color: #000;
    font-family: 'Courier New', Courier, monospace;
    color: white;
}

/* 2. VCR Loader Section */
#loader {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #0000ff; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.4);
    animation: crt-glow 0.15s infinite alternate;
    transition: opacity 0.4s steps(4), transform 0.3s ease-out;
}

@keyframes crt-glow { from { opacity: 1; } to { opacity: 0.97; } }

.static-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://upload.wikimedia.org/wikipedia/commons/5/5a/Static_noise.gif');
    opacity: 0.05; pointer-events: none; z-index: 1001;
}

.loader-logo {
    width: 240px;
    height: auto;
    margin-bottom: 25px;
    z-index: 1004;
}

.osd-corner {
    position: absolute;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 2px 2px #000;
    z-index: 1002;
}

.top-right { top: 5%; right: 8%; animation: vcr-blink 2s infinite; }
.bottom-left { bottom: 5%; left: 8%; }
.bottom-right { bottom: 5%; right: 8%; }

@keyframes vcr-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.osd-text {
    position: relative; color: #ffffff;
    font-size: 1.8rem; font-weight: bold; text-shadow: 3px 3px #000;
    z-index: 1002; letter-spacing: 2px; text-align: center;
}

.loading-subtext { font-size: 0.8rem; margin-top: 10px; opacity: 0.9; }

.loading-bar-container {
    width: 60%; height: 2px; background: rgba(255,255,255,0.1);
    margin-top: 40px; position: relative; z-index: 1003;
    border: 1px solid rgba(255,255,255,0.2);
}

.loading-bar-fill { height: 100%; background: #fff; width: 0%; }

/* 3. Main App Styles */
#card-container { position: relative; width: 100%; height: 100%; }

.card {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: #000;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
    display: flex; flex-direction: column; overflow: hidden;
}

.image-scroller {
    display: flex; flex-direction: row;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%; height: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
    touch-action: pan-x;
}

.image-scroller::-webkit-scrollbar { display: none; }

.vhs-photo {
    flex: 0 0 100%; width: 100vw; height: 100%;
    scroll-snap-align: start;
    background-size: contain; background-repeat: no-repeat;
    background-position: center; background-color: #000;
}

.nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 45px; height: 45px; background: rgba(0,0,0,0.4);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white; cursor: pointer; z-index: 20;
    border: 1px solid rgba(255,255,255,0.1); opacity: 0; transition: opacity 0.3s ease;
}

.card:active .nav-arrow, .card:hover .nav-arrow { opacity: 1; }
.nav-arrow.left { left: 15px; }
.nav-arrow.right { right: 15px; }

/* 4. CRT Overlay */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
    background-size: 100% 2px, 3px 100%;
    pointer-events: none; z-index: 999; 
}

/* 5. UI Elements */
.content {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 70%, transparent 100%);
    padding: 20px 25px 60px 25px; box-sizing: border-box;
    pointer-events: none; z-index: 5;
    display: flex; flex-direction: column; align-items: flex-start;
}

.photo-dots {
    width: 100%; display: flex; justify-content: center;
    gap: 8px; margin-top: 20px; padding-bottom: 10px;
}

.dot { width: 6px; height: 6px; background: rgba(255,255,255,0.3); border-radius: 50%; transition: 0.3s; }
.blurb { font-size: 0.85rem; color: #00ff00; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }

.title { 
    font-size: 1.6rem; font-weight: 800; margin: 0; line-height: 1.1; 
    pointer-events: auto; padding-right: 115px; width: 100%; box-sizing: border-box;
}

/* 6. Floating Sticker & Share */
.floating-buttons {
    position: absolute; right: 15px; bottom: 125px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 20px; z-index: 10;
}

.price-sticker {
    background: #ffff00; color: #000; padding: 10px 12px;
    font-weight: 900; font-size: 1.2rem; text-decoration: none;
    transform: rotate(-4deg); box-shadow: 4px 4px 0px rgba(0,0,0,0.8);
    display: flex; flex-direction: column; align-items: center;
    min-width: 100px; pointer-events: auto; border: 1.5px solid #000;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer; position: relative;
}

.price-sticker::after { content: '🛒'; position: absolute; top: 2px; left: 4px; font-size: 0.7rem; opacity: 0.8; }
.price-sticker::before {
    content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; background: #000; border-radius: 50%;
}

.price-sticker:hover { transform: rotate(-2deg) translateY(-2px); box-shadow: 6px 6px 0px rgba(0,0,0,0.8); }
.price-sticker:active { transform: rotate(-4deg) translateY(2px) scale(0.95); box-shadow: 2px 2px 0px rgba(0,0,0,0.8); }

.sticker-top { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: -2px; opacity: 0.7; }

.share-btn {
    background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.2); 
    pointer-events: auto; cursor: pointer;
    transition: transform 0.1s ease;
}

.share-btn:active { transform: scale(0.9); }
.share-btn svg { width: 22px; height: 22px; fill: white; }