/* Plorp - Windows 95 Retro CSS */

/* CSS Variables */
:root {
    --surface-950: #0a0f1f;
    /* background canvas gelap */
    --surface-900: #c0c0c0;
    /* panel win95 abu-abu */
    --text-high: #000;
    /* teks utama hitam */
    --text-invert: #fff;
    /* teks putih (title bar) */
    --primary: #000080;
    /* biru Win95 klasik */
    --accent: #ff00ff;
    /* glitch magenta */
    --accent-2: #00ffff;
    /* glitch cyan */
    --signal: #00cc00;
    /* progress bar hijau */
}

/* Custom Font Face */
@font-face {
    font-family: 'KA1';
    src: url('../assets/font/ka1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AriW9500';
    src: url('../assets/font/ari-w9500-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--surface-950);
}

.desktop-background {
    background-image: url('../assets/wallpaper.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* CRT Overlay */
#crt-overlay {
    background:
        linear-gradient(transparent 50%, rgba(0, 255, 0, 0.03) 50%),
        linear-gradient(90deg, transparent 50%, rgba(0, 255, 0, 0.03) 50%);
    background-size: 100% 4px, 4px 100%;
    animation: scanlineShift 0.1s linear infinite;
    pointer-events: none;
}

/* Scanline Animation */
@keyframes scanlineShift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

/* CRT Flicker */
@keyframes crtFlicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.98;
    }
}

#crt-overlay {
    animation: crtFlicker 0.15s infinite linear;
}

/* Main Title Styles */
.main-title {
    font-family: 'KA1', 'Courier New', 'MS Sans Serif', monospace;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    letter-spacing: 0.1em;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    display: inline-block;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: white !important;
    font-size: 3rem;
    font-weight: normal;
}

/* Parallax Effects */
#parallax-bg {
    background-image: url('../assets/wallpaper.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    will-change: transform;
    z-index: 0;
    transform: translateZ(0);
    /* Hardware acceleration */
}

#parallax-image {
    will-change: transform;
    z-index: 1;
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    pointer-events: none !important;
}

#parallax-image img {
    will-change: transform;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transform: translateZ(0);
    /* Hardware acceleration */
    width: 1000px !important;
    height: auto !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Smooth parallax transitions */
#parallax-bg,
#parallax-image {
    transition: transform 0.1s ease-out;
}

/* Tooltip Styles - Skeuomorphic dengan Tema */
.tooltip {
    background: linear-gradient(145deg, #f7fafc, #edf2f7);
    border: 3px solid;
    border-color: #ffffff #cbd5e0 #a0aec0 #ffffff;
    border-radius: 6px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    font-family: 'KA1', 'MS Sans Serif', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #2d3748;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 -1px 0 rgba(0, 0, 0, 0.2);
    z-index: 50;
    transition: opacity 0.3s ease;
    position: relative;
    padding: 4px 9px;
    letter-spacing: 0.15px;
    white-space: nowrap;
    width: fit-content;
    min-width: auto;
    opacity: 0;
    visibility: hidden;
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(145deg, #cbd5e0, #a0aec0);
    border-radius: 8px;
    z-index: -1;
}


/* Static hover area for tooltip */
#plonmg-hover-area {
    transition: transform 0.3s ease;
    pointer-events: auto;
    z-index: 30 !important;
}

#plonmg-hover-area:hover {
    transform: translate(-50%, -5px);
}

#plonmg-hover-area:hover+#parallax-image img,
#plonmg-hover-area:hover~#parallax-image img {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Ensure tooltip is visible */
.group:hover .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-2px);
}


/* Tooltip visibility */
#plonmg-hover-area:hover .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-2px) scale(1.05);
}

/* Tooltip Arrow - Kecil dan Skeuomorphic */
.tooltip .tooltip-arrow {
    position: absolute;
    top: 100%;
    right: 12px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #a0aec0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.tooltip .tooltip-arrow::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -4px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #cbd5e0;
}

/* Skeuomorphic Popup Window */
.skeuomorphic-popup {
    cursor: pointer;
    pointer-events: auto;
    will-change: transform, opacity;
}

/* All popups use same size - no special CSS needed */

/* Screen Border Frame - 3D Monitor Effect */
#screen-border {
    z-index: 40;
    pointer-events: none;
}

/* Desktop Root - Content Area Inside Frame */
#desktop-root {
    overflow: hidden;
    background: transparent;
    z-index: 10;
}

.desktop-content-area {
    top: 32px;
    left: 32px;
    right: 32px;
    bottom: 32px;
}



/* Start Menu Dropdown - Dark Theme Matching Frame */
.floating-taskbar .win95-dropdown {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 50%, #1a202c 100%) !important;
    border: 2px solid !important;
    border-color: #718096 #1a202c #4a5568 #718096 !important;
    box-shadow:
        0 -8px 16px rgba(0, 0, 0, 0.4),
        0 -4px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
    bottom: 60px;
    left: 0;
    right: auto;
    width: 200px;
    border-radius: 8px 8px 0 0;
    z-index: 10000 !important;
    position: absolute !important;
}

/* Menu Items - Dark Theme */
.floating-taskbar .win95-menu-item {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-family: 'AriW9500', 'Courier New', monospace !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}

/* FontAwesome Icons - White Color (No Shadow) */
.floating-taskbar .win95-menu-item i,
.floating-taskbar .win95-button i {
    color: #ffffff !important;
}

/* PNG Icons - No Filter (Keep Original Colors) */
.floating-taskbar img {
    filter: none !important;
    opacity: 1 !important;
}

/* Global FontAwesome Icons - White Color (No Shadow) */
.floating-taskbar i {
    color: #ffffff !important;
}

/* FontAwesome Icons in CA Address Box (No Shadow) */
.floating-taskbar .ca-address-icon i {
    color: #ffffff !important;
}

.floating-taskbar .win95-menu-item:hover {
    background: linear-gradient(90deg, #718096 0%, #4a5568 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2) !important;
}

.floating-taskbar .win95-menu-item:active {
    background: linear-gradient(90deg, #2d3748 0%, #1a202c 100%) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1) !important;
}

/* Menu Separator */
.floating-taskbar .menu-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #718096 50%, transparent 100%);
    margin: 4px 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* Floating Taskbar - Matching Frame Style */
.floating-taskbar {
    background: linear-gradient(180deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
    border: 4px solid;
    border-color: #718096 #1a202c #4a5568 #718096;
    box-shadow:
        0 -4px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1000px;
    border-radius: 16px;
    z-index: 9999 !important;
    position: fixed !important;
    bottom: 1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.floating-taskbar::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.floating-taskbar::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 16px 0 0 16px;
    z-index: 1;
}

/* Taskbar Text and Buttons - Dark Theme Matching Frame */
.floating-taskbar .text-black {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.floating-taskbar .win95-button {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 50%, #1a202c 100%);
    border: 2px solid;
    border-color: #718096 #1a202c #4a5568 #718096;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.floating-taskbar .win95-button:hover {
    background: linear-gradient(180deg, #718096 0%, #4a5568 50%, #2d3748 100%);
    border-color: #a0aec0 #2d3748 #718096 #a0aec0;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
}

.floating-taskbar .win95-button:active {
    background: linear-gradient(180deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
    border-color: #4a5568 #1a202c #2d3748 #4a5568;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1);
}

/* CA Address Box - Dark Theme Matching Frame */
.floating-taskbar .ca-address-box {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 50%, #1a202c 100%) !important;
    border: 2px solid !important;
    border-color: #718096 #1a202c #4a5568 #718096 !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    min-width: 200px !important;
    max-width: 300px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
}

.floating-taskbar .ca-address-box #ca-display {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-family: 'AriW9500', 'Courier New', monospace !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Clock - Dark Theme Matching Frame */
.floating-taskbar .win95-clock {
    background: linear-gradient(180deg, #4a5568 0%, #2d3748 50%, #1a202c 100%);
    border: 2px solid;
    border-color: #718096 #1a202c #4a5568 #718096;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.1),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

/* Copy Button - Dark Theme with Green Accent */
.floating-taskbar .ca-address-icon {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%) !important;
    border: 2px solid !important;
    border-color: #4ade80 #15803d #166534 #4ade80 !important;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    transition: all 0.1s ease !important;
    cursor: pointer !important;
}

.floating-taskbar .ca-address-icon:hover {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
    border-color: #5eea8f #16a34a #15803d #5eea8f;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.floating-taskbar .ca-address-icon:active {
    background: linear-gradient(180deg, #15803d 0%, #166534 50%, #14532d 100%);
    border-color: #16a34a #14532d #166534 #16a34a;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 -1px 2px rgba(255, 255, 255, 0.1);
}

/* Popup Windows - Ensure Inside Frame with 5px Gap */
.skeuomorphic-popup {
    max-width: calc(100vw - 64px);
    max-height: calc(100vh - 64px);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Grid Container for Popups with 5px Gap */
.popup-grid-container {
    display: grid;
    gap: 5px;
    padding: 20px;
    box-sizing: border-box;
}

#screen-border>div {
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}

/* Top Border */
#screen-border .absolute.top-0 {
    background: linear-gradient(180deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
    border-bottom: 4px solid #718096;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* Bottom Border */
#screen-border .absolute.bottom-0 {
    background: linear-gradient(0deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
    border-top: 4px solid #718096;
    box-shadow:
        0 -4px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(255, 255, 255, 0.1);
}

/* Left Border */
#screen-border .absolute.left-0 {
    background: linear-gradient(90deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
    border-right: 4px solid #718096;
    box-shadow:
        4px 0 8px rgba(0, 0, 0, 0.4),
        inset 2px 0 4px rgba(255, 255, 255, 0.1),
        inset -2px 0 4px rgba(0, 0, 0, 0.3);
}

/* Right Border */
#screen-border .absolute.right-0 {
    background: linear-gradient(270deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
    border-left: 4px solid #718096;
    box-shadow:
        -4px 0 8px rgba(0, 0, 0, 0.4),
        inset 2px 0 4px rgba(0, 0, 0, 0.3),
        inset -2px 0 4px rgba(255, 255, 255, 0.1);
}

/* Corner Decorations */
#screen-border .absolute.top-0.left-0,
#screen-border .absolute.top-0.right-0,
#screen-border .absolute.bottom-0.left-0,
#screen-border .absolute.bottom-0.right-0 {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #1a202c 100%);
    box-shadow:
        0 0 8px rgba(0, 0, 0, 0.6),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset -2px -2px 4px rgba(0, 0, 0, 0.4);
}

.skeuomorphic-window {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #f8fafc, #e2e8f0);
    border: 4px solid;
    border-color: #ffffff #cbd5e0 #a0aec0 #ffffff;
    border-radius: 20px;
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.4),
        inset 0 3px 6px rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(0, 0, 0, 0.1),
        0 0 0 2px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.skeuomorphic-window::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(145deg, #cbd5e0, #a0aec0);
    border-radius: 24px;
    z-index: -1;
}

.skeuomorphic-window::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
    border-radius: 22px;
    z-index: -2;
}

.skeuomorphic-content {
    width: 100%;
    height: 100%;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    overflow: hidden;
}

.skeuomorphic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 -2px 4px rgba(255, 255, 255, 0.3);
}




/* Windows 95 Window Styles - Enhanced Skeuomorphic */
.win95-window {
    border: 3px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.6),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
}

.win95-window::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-window::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-title-bar {
    background: linear-gradient(90deg, #000080 0%, #0000ff 100%);
    border-bottom: 1px solid #000080;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.win95-title-bar span {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

/* Windows 95 Button Styles - Enhanced Skeuomorphic */
.win95-button {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
    border: 2px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.1s ease;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.win95-button::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 1px;
}

.win95-button::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    border-radius: 1px;
}

.win95-button:hover {
    background: linear-gradient(180deg, #f0f0f0 0%, #d0d0d0 50%, #b0b0b0 100%);
    border-color: #ffffff #a0a0a0 #606060 #d0d0d0;
    box-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.5),
        inset 1px 1px 2px rgba(255, 255, 255, 0.9),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.win95-button:active {
    background: linear-gradient(180deg, #a0a0a0 0%, #808080 50%, #606060 100%);
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.5),
        inset -1px -1px 2px rgba(255, 255, 255, 0.3);
    transform: translateY(1px);
}

.win95-button:active::before,
.win95-button:active::after {
    display: none;
}


/* Dropdown Menu Styles - Enhanced Skeuomorphic */
.win95-dropdown {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 100%);
    border: 3px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    box-shadow:
        4px 4px 8px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.6),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 70;
    position: relative;
}

.win95-dropdown::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-dropdown::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-menu-item {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    border-bottom: 1px solid #808080;
    transition: all 0.1s ease;
}

.win95-menu-item:last-child {
    border-bottom: none;
}

.win95-menu-item:hover {
    background: linear-gradient(90deg, #000080 0%, #0000ff 100%);
    color: white;
}

/* Modal Styles */
.win95-modal {
    -webkit-backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.win95-modal .win95-window {
    max-height: 90vh;
    overflow: hidden;
}

/* Progress Bar Styles - Enhanced Skeuomorphic */
.win95-progress-container {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
    border: 3px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    position: relative;
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5);
}

.win95-progress-container::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-progress-container::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-progress-bar {
    background: linear-gradient(180deg,
            #00ff00 0%,
            #00cc00 30%,
            #00aa00 60%,
            #008800 100%);
    transition: width 0.3s ease;
    box-shadow:
        inset 1px 1px 3px rgba(0, 0, 0, 0.4),
        inset -1px -1px 1px rgba(255, 255, 255, 0.3),
        0 0 8px rgba(0, 255, 0, 0.3);
    position: relative;
    z-index: 2;
}

.win95-progress-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    border-radius: 1px;
}

.win95-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px);
    animation: progressShine 2s linear infinite;
}

@keyframes progressShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}


/* Desktop Shortcut Styles */
.desktop-shortcuts-container {
    z-index: 10;
}

.desktop-shortcut {
    transition: all 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

.desktop-shortcut .w-12 {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
    border: 3px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    box-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.4),
        inset 1px 1px 2px rgba(255, 255, 255, 0.8),
        inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
}

.desktop-shortcut .w-12::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.desktop-shortcut .w-12::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

/* Windows 95 Icon Filters */
.win95-icon-filter {
    filter:
        grayscale(100%) contrast(120%) brightness(90%) sepia(20%) hue-rotate(200deg) saturate(80%);
    transition: filter 0.2s ease;
}

.win95-icon-filter:hover {
    filter:
        grayscale(80%) contrast(130%) brightness(100%) sepia(30%) hue-rotate(200deg) saturate(100%);
}

.win95-emoji-filter {
    filter:
        grayscale(100%) contrast(120%) brightness(90%) sepia(20%) hue-rotate(200deg) saturate(80%);
    transition: filter 0.2s ease;
}

.win95-emoji-filter:hover {
    filter:
        grayscale(80%) contrast(130%) brightness(100%) sepia(30%) hue-rotate(200deg) saturate(100%);
}

.desktop-shortcut:hover {
    transform: scale(1.05);
}

.desktop-shortcut:active {
    transform: scale(0.95);
}

/* Clock Styles - Enhanced Skeuomorphic */
.win95-clock {
    background: linear-gradient(180deg, #e0e0e0 0%, #c0c0c0 50%, #a0a0a0 100%);
    border: 3px solid;
    border-color: #ffffff #808080 #404040 #c0c0c0;
    box-shadow:
        inset 2px 2px 4px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(255, 255, 255, 0.5);
    font-family: 'AriW9500', 'Courier New', monospace;
    min-width: 60px;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.win95-clock::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

.win95-clock::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    width: 1px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
    z-index: 1;
}

/* Meme Gallery Styles */
.meme-item {
    transition: all 0.2s ease;
}

.meme-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.meme-item img {
    transition: all 0.2s ease;
}

.meme-item:hover img {
    border-color: var(--primary);
}

/* Toast Notification */
#toast {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--signal);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: toastSlide 0.3s ease-out;
}

@keyframes toastSlide {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-shortcut {
        margin-bottom: 8px;
    }

    .win95-taskbar {
        height: 48px;
    }

    .win95-button {
        padding: 4px 8px;
        font-size: 12px;
    }

    .win95-taskbar .flex.items-center.space-x-2 {
        gap: 4px;
    }

    .win95-dropdown {
        width: 200px;
    }

    .win95-modal .win95-window {
        width: 95vw;
        max-width: none;
    }

    .win95-title {
        font-size: 2rem;
        letter-spacing: 1px;
    }

    .win95-subtitle {
        font-size: 1rem;
        letter-spacing: 0.5px;
    }

    .glitch-text {
        font-size: 2rem;
    }

    .glitch-text::before,
    .glitch-text::after {
        display: none;
        /* Disable glitch on mobile for performance */
    }
}

@media (max-width: 480px) {
    .desktop-shortcut {
        width: 40px;
        height: 40px;
    }

    .desktop-shortcut span {
        font-size: 10px;
    }

    .win95-taskbar {
        height: 44px;
        padding: 0 4px;
    }

    .win95-button {
        padding: 2px 6px;
        font-size: 10px;
    }

    .win95-clock {
        font-size: 10px;
        padding: 2px 6px;
    }

    .glitch-text {
        font-size: 1.5rem;
    }
}

/* Grid Layout for Mobile Shortcuts */
@media (max-width: 768px) {
    .desktop-shortcut {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
    }

    .desktop-shortcut:last-child {
        margin-right: 0;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .glitch-text::before,
    .glitch-text::after {
        animation: none;
    }

    .glitch-burst {
        animation: none;
    }

    #crt-overlay {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .win95-button {
        border-width: 3px;
    }

    .win95-window {
        border-width: 3px;
    }
}

/* Shutdown Screen Styles */
#shutdown-screen {
    background: linear-gradient(45deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    animation: shutdownFadeIn 0.5s ease-in;
}

@keyframes shutdownFadeIn {
    from {
        opacity: 0;
        background: #000000;
    }

    to {
        opacity: 1;
        background: linear-gradient(45deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    }
}

#shutdown-screen .animate-pulse {
    animation: shutdownPulse 1s ease-in-out infinite;
}

@keyframes shutdownPulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scaleX(1);
    }

    50% {
        opacity: 1;
        transform: scaleX(1.1);
    }
}

/* Start Menu Separator */
.win95-dropdown .border-t {
    border-color: #808080;
    margin: 2px 0;
}

/* Windows 95 Error Popup Styles */
.win95-error-popup {
    position: absolute;
    width: 300px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    pointer-events: auto;
    z-index: 1000;
    animation: errorPopupAppear 0.3s ease-out;
}

@keyframes errorPopupAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes errorPopupDisappear {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
}

.win95-error-title-bar {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    background: linear-gradient(90deg, #000080 0%, #0000ff 100%);
    color: white;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.win95-error-close {
    width: 16px;
    height: 14px;
    background: #c0c0c0;
    border: 1px solid #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
}

.win95-error-close:hover {
    background: #ff0000;
    color: white;
}

.win95-error-content {
    padding: 16px;
    text-align: center;
}

.win95-error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.win95-error-message {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    font-size: 11px;
    color: #000;
    margin-bottom: 16px;
    line-height: 1.3;
}

.win95-error-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.win95-error-button {
    font-family: 'AriW9500', 'MS Sans Serif', 'Microsoft Sans Serif', sans-serif;
    background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%);
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    min-width: 60px;
    transition: all 0.1s ease;
}

.win95-error-button:hover {
    border-color: #ffffff #c0c0c0 #c0c0c0 #ffffff;
}

.win95-error-button:active {
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Error popup stacking effect */
.win95-error-popup:nth-child(1) {
    z-index: 1000;
}

.win95-error-popup:nth-child(2) {
    z-index: 1001;
    transform: translate(10px, 10px);
}

.win95-error-popup:nth-child(3) {
    z-index: 1002;
    transform: translate(20px, 20px);
}

.win95-error-popup:nth-child(4) {
    z-index: 1003;
    transform: translate(30px, 30px);
}

.win95-error-popup:nth-child(5) {
    z-index: 1004;
    transform: translate(40px, 40px);
}

.win95-error-popup:nth-child(6) {
    z-index: 1005;
    transform: translate(50px, 50px);
}

.win95-error-popup:nth-child(7) {
    z-index: 1006;
    transform: translate(60px, 60px);
}

.win95-error-popup:nth-child(8) {
    z-index: 1007;
    transform: translate(70px, 70px);
}

.win95-error-popup:nth-child(9) {
    z-index: 1008;
    transform: translate(80px, 80px);
}

.win95-error-popup:nth-child(10) {
    z-index: 1009;
    transform: translate(90px, 90px);
}


/* Video Preloader Styles */
#preloader {
    animation: preloaderZoomIn 0.3s ease-out;
}

#preloader-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    animation: videoZoomIn 0.3s ease-out;
}

@keyframes preloaderZoomIn {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes videoZoomIn {
    0% {
        transform: scale(1.3);
        filter: brightness(1.2);
    }

    100% {
        transform: scale(1.1);
        filter: brightness(1);
    }
}




/* Print styles */
@media print {

    #crt-overlay,
    .win95-taskbar,
    .desktop-shortcut {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}