/* ============================================================
   DESKTOP
   Background, icons, selection
   ============================================================ */

#desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-height);
    background: var(--win95-desktop) url('assets/icons/wallpaper.png') center center / cover no-repeat;
    overflow: hidden;
    z-index: 0;
}

/* ---- Desktop Icons ---- */

#desktop-icons {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

#desktop-icons .desktop-icon {
    pointer-events: all;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    padding: 4px 2px;
    cursor: default;
    text-decoration: none;
}

.desktop-icon-img {
    width: 32px;
    height: 32px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
}

.desktop-icon-img img {
    display: block;
    image-rendering: pixelated;
}

.desktop-icon-label {
    color: var(--win95-white);
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    word-wrap: break-word;
    line-height: 13px;
    padding: 1px 2px;
    max-width: 68px;
}

.desktop-icon.selected .desktop-icon-label {
    background: var(--win95-navy);
    color: var(--win95-white);
    text-shadow: none;
}

.desktop-icon.selected .desktop-icon-img {
    filter: brightness(0.7) sepia(1) hue-rotate(200deg) saturate(3);
}

/* ============================================================
   CSS ICON FALLBACKS
   Used when image files are not available, and for custom
   apps that have no Win95 original (Pomodoro, Pet, etc.)
   ============================================================ */

/* ------------------------------------------------------------
   My Computer — CSS fallback
   ------------------------------------------------------------ */
.icon-my-computer {
    position: relative;
}
.icon-my-computer::before {
    content: '';
    display: block;
    width: 26px;
    height: 18px;
    background:
        linear-gradient(to bottom, #000080 0px, #000080 10px, #000 10px) no-repeat 2px 2px / 20px 12px,
        linear-gradient(to bottom, #fff 1px, #c0c0c0 1px);
    border: 1px solid #000;
    margin: 0 auto;
}
.icon-my-computer::after {
    content: '';
    display: block;
    width: 16px;
    height: 6px;
    background: linear-gradient(to bottom, #fff 1px, #c0c0c0 1px, #c0c0c0 4px, #808080 4px);
    border: 1px solid #000;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Recycle Bin — CSS fallback
   ------------------------------------------------------------ */
.icon-recycle-bin {
    position: relative;
}
.icon-recycle-bin::before {
    content: '';
    display: block;
    width: 20px;
    height: 22px;
    background:
        repeating-linear-gradient(
            to right,
            transparent 0px, transparent 3px,
            #808080 3px, #808080 4px
        ),
        linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    border: 1px solid #000;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 0 0 3px 3px;
    margin: 8px auto 0;
}
.icon-recycle-bin::after {
    content: '';
    display: block;
    width: 24px;
    height: 5px;
    background: linear-gradient(to bottom, #fff, #c0c0c0);
    border: 1px solid #000;
    border-top-color: #fff;
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: 2px;
    left: 4px;
    box-shadow:
        4px -3px 0 0 #000,
        5px -3px 0 0 #000,
        6px -3px 0 0 #000,
        7px -3px 0 0 #000,
        8px -3px 0 0 #000;
}

/* Recycle Bin full state */
.icon-recycle-bin-full::before {
    background:
        repeating-linear-gradient(
            to right,
            transparent 0px, transparent 3px,
            #808080 3px, #808080 4px
        ),
        linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    border: 1px solid #000;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 0 0 3px 3px;
    margin: 8px auto 0;
    /* Add paper sticking out the top */
    box-shadow: inset 0 -4px 0 rgba(255,255,255,0.3);
}
.icon-recycle-bin-full::after {
    box-shadow:
        4px -3px 0 0 #000,
        5px -3px 0 0 #000,
        6px -3px 0 0 #000,
        7px -3px 0 0 #000,
        8px -3px 0 0 #000,
        /* paper sticking out */
        3px -8px 0 0 #fff,
        4px -8px 0 0 #fff,
        5px -8px 0 0 #fff,
        6px -8px 0 0 #fff,
        3px -9px 0 0 #000,
        7px -9px 0 0 #000,
        3px -10px 0 0 #fff,
        4px -10px 0 0 #fff,
        5px -10px 0 0 #fff,
        6px -10px 0 0 #fff,
        3px -11px 0 0 #000,
        7px -11px 0 0 #000;
}

/* ------------------------------------------------------------
   Network Neighborhood — CSS fallback
   ------------------------------------------------------------ */
.icon-network {
    position: relative;
}
.icon-network::before {
    content: '';
    display: block;
    width: 14px;
    height: 10px;
    background:
        linear-gradient(to bottom, #000080, #1084d0) no-repeat 2px 2px / 9px 4px,
        linear-gradient(to bottom, #fff 1px, #c0c0c0 1px);
    border: 1px solid #000;
    position: absolute;
    top: 2px;
    left: 1px;
}
.icon-network::after {
    content: '';
    display: block;
    width: 14px;
    height: 10px;
    background:
        linear-gradient(to bottom, #000080, #1084d0) no-repeat 2px 2px / 9px 4px,
        linear-gradient(to bottom, #fff 1px, #c0c0c0 1px);
    border: 1px solid #000;
    position: absolute;
    top: 12px;
    right: 1px;
}

/* ------------------------------------------------------------
   Internet Explorer — CSS fallback
   ------------------------------------------------------------ */
.icon-ie {
    position: relative;
}
.icon-ie::before {
    content: 'e';
    font-family: "Times New Roman", Georgia, serif;
    font-size: 28px;
    font-weight: bold;
    font-style: italic;
    color: #0000ff;
    text-shadow: 1px 1px 0 #000080, -1px 0 0 #000080;
    display: block;
    text-align: center;
    line-height: 32px;
}
.icon-ie::after {
    content: '';
    position: absolute;
    top: 7px;
    left: -2px;
    width: 34px;
    height: 18px;
    border: 2px solid #ffff00;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(-30deg);
}

/* ------------------------------------------------------------
   Notepad — CSS fallback
   ------------------------------------------------------------ */
.icon-notepad {
    position: relative;
}
.icon-notepad::before {
    content: '';
    display: block;
    width: 24px;
    height: 28px;
    background:
        linear-gradient(to bottom, #000080 0px, #000080 5px, transparent 5px) no-repeat 0 0 / 24px 6px,
        radial-gradient(circle at 4px 3px, #c0c0c0 1px, transparent 1px),
        radial-gradient(circle at 9px 3px, #c0c0c0 1px, transparent 1px),
        radial-gradient(circle at 14px 3px, #c0c0c0 1px, transparent 1px),
        radial-gradient(circle at 19px 3px, #c0c0c0 1px, transparent 1px),
        repeating-linear-gradient(
            transparent 0px, transparent 3px,
            #808080 3px, #808080 4px
        ),
        #fff;
    border: 1px solid #000;
    margin: 2px auto;
}
.icon-notepad::after {
    content: '';
    display: block;
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, #ff0000 2px, #ffff00 2px, #ffff00 12px, #808000 12px, #808000 14px, #000 14px);
    position: absolute;
    bottom: 0;
    right: 2px;
    transform: rotate(25deg);
    transform-origin: bottom right;
    border-radius: 0 0 1px 1px;
}

/* ------------------------------------------------------------
   Calculator — CSS fallback
   ------------------------------------------------------------ */
.icon-calculator {
    position: relative;
}
.icon-calculator::before {
    content: '';
    display: block;
    width: 22px;
    height: 28px;
    background:
        linear-gradient(to bottom, #008000, #00ff00) no-repeat 3px 3px / 16px 6px,
        #808080;
    border: 1px solid #000;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 2px;
    margin: 2px auto;
}

/* ------------------------------------------------------------
   Minesweeper — CSS fallback
   ------------------------------------------------------------ */
.icon-minesweeper {
    position: relative;
}
.icon-minesweeper::before {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    background:
        radial-gradient(circle at 12px 12px, #fff 1px, transparent 2px),
        radial-gradient(circle at 14px 14px, #808080 4px, #000 5px, transparent 6px),
        linear-gradient(#000, #000) no-repeat 13px 4px / 2px 20px,
        linear-gradient(#000, #000) no-repeat 4px 13px / 20px 2px,
        linear-gradient(45deg, transparent 42%, #000 42%, #000 58%, transparent 58%) no-repeat 4px 4px / 20px 20px,
        linear-gradient(-45deg, transparent 42%, #000 42%, #000 58%, transparent 58%) no-repeat 4px 4px / 20px 20px,
        #c0c0c0;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    margin: 2px auto;
}

/* ------------------------------------------------------------
   Paint — CSS fallback
   ------------------------------------------------------------ */
.icon-paint {
    position: relative;
}
.icon-paint::before {
    content: '';
    display: block;
    width: 28px;
    height: 26px;
    background:
        radial-gradient(circle at 7px 7px, #ff0000 2px, transparent 3px),
        radial-gradient(circle at 16px 5px, #0000ff 2px, transparent 3px),
        radial-gradient(circle at 23px 8px, #00ff00 2px, transparent 3px),
        radial-gradient(circle at 6px 16px, #ffff00 2px, transparent 3px),
        radial-gradient(circle at 14px 15px, #ff00ff 2px, transparent 3px),
        radial-gradient(circle at 21px 16px, #000 2px, transparent 3px),
        radial-gradient(circle at 10px 21px, #808080 2px, transparent 3px),
        radial-gradient(ellipse at 50% 50%, #fff 52%, #c0c0c0 55%, transparent 58%);
    border-radius: 50% 50% 50% 40%;
    margin: 3px auto;
    border: 1px solid #808080;
}
.icon-paint::after {
    content: '';
    display: block;
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, #ff0000 3px, #808080 3px, #808080 4px, #808000 4px, #808000 14px, #000 14px);
    position: absolute;
    top: -2px;
    right: 2px;
    transform: rotate(25deg);
    border-radius: 1px;
}

/* ------------------------------------------------------------
   Explorer — CSS fallback
   ------------------------------------------------------------ */
.icon-explorer {
    position: relative;
}
.icon-explorer::before {
    content: '';
    display: block;
    width: 10px;
    height: 4px;
    background: #ffff00;
    border: 1px solid #808000;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    margin: 6px 0 0 2px;
}
.icon-explorer::after {
    content: '';
    display: block;
    width: 26px;
    height: 18px;
    background: linear-gradient(to bottom, #ffff00, #808000);
    border: 1px solid #808000;
    border-top-color: #ffff00;
    border-left-color: #ffff00;
    border-radius: 0 2px 2px 2px;
}

/* ------------------------------------------------------------
   MS-DOS Prompt — CSS fallback
   ------------------------------------------------------------ */
.icon-dos {
    position: relative;
}
.icon-dos::before {
    content: '';
    display: block;
    width: 28px;
    height: 24px;
    background:
        linear-gradient(to bottom,
            #000080 0px, #000080 4px,
            #c0c0c0 4px, #c0c0c0 5px,
            #000 5px
        );
    border: 2px solid;
    border-color: #fff #000 #000 #fff;
    border-radius: 1px;
    margin: 2px auto 0;
    box-shadow: inset -1px -1px #808080, inset 1px 1px #fff;
}
.icon-dos::after {
    content: 'C:\\>';
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 8px;
    color: #c0c0c0;
    font-weight: bold;
    position: absolute;
    top: 14px;
    left: 6px;
    line-height: 1;
    letter-spacing: -0.5px;
}

/* ============================================================
   CUSTOM APP ICONS (no Win95 originals)
   ============================================================ */

/* ------------------------------------------------------------
   Pomodoro 95 — tomato
   ------------------------------------------------------------ */
.icon-pomodoro {
    position: relative;
}
.icon-pomodoro::before {
    content: '';
    display: block;
    width: 26px;
    height: 24px;
    background: radial-gradient(ellipse at 40% 35%, #ff0000 0%, #ff0000 40%, #800000 80%, #800000 100%);
    border-radius: 50%;
    border: 1px solid #000;
    margin: 4px auto 0;
    box-shadow: inset -3px -3px 0 #800000, inset 3px 3px 0 #ff0000;
}
.icon-pomodoro::after {
    content: '';
    display: block;
    width: 4px;
    height: 7px;
    background: #008000;
    border: 1px solid #000;
    border-radius: 1px;
    position: absolute;
    top: 0;
    left: 14px;
}

/* ------------------------------------------------------------
   Media Player — dark player window with play button + EQ bars
   ------------------------------------------------------------ */
.icon-media-player {
    position: relative;
}
.icon-media-player::before {
    content: '';
    display: block;
    width: 28px;
    height: 24px;
    background:
        linear-gradient(to bottom, #000080 0px, #000080 3px, #000 3px);
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    border-radius: 1px;
    margin: 2px auto 0;
}
.icon-media-player::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #00ff00;
    position: absolute;
    top: 12px;
    left: 12px;
}

/* ------------------------------------------------------------
   Virtual Pet — Tamagotchi egg with LCD screen & buttons
   ------------------------------------------------------------ */
.icon-pet {
    position: relative;
}
.icon-pet::before {
    content: '';
    display: block;
    width: 22px;
    height: 28px;
    background:
        linear-gradient(to bottom, #c0c0c0 1px, #c8e8c8 1px, #c8e8c8 11px, #c0c0c0 11px) no-repeat 4px 4px / 14px 12px,
        radial-gradient(ellipse at 50% 55%, #c0c0c0 50%, #808080 60%, transparent 61%);
    border: 1px solid #000;
    border-radius: 35% 35% 45% 45%;
    margin: 2px auto;
}
.icon-pet::after {
    content: '';
    display: block;
    width: 12px;
    height: 3px;
    background:
        linear-gradient(to right,
            #808080 3px, transparent 3px, transparent 4px,
            #808080 4px, #808080 7px, transparent 7px, transparent 8px,
            #808080 8px, #808080 11px
        );
    position: absolute;
    bottom: 5px;
    left: 10px;
}

/* ------------------------------------------------------------
   WordArt — bold rainbow "A" letter
   ------------------------------------------------------------ */
.icon-wordart {
    position: relative;
}
.icon-wordart::before {
    content: 'A';
    font-size: 28px;
    font-weight: 900;
    font-style: italic;
    font-family: "Arial Black", "Impact", sans-serif;
    background: linear-gradient(to bottom, #ff0000, #ffff00, #00ff00, #0000ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    text-align: center;
    line-height: 32px;
    filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px 0 0 #808080);
}

/* ------------------------------------------------------------
   Generic file icon — white page with corner fold
   ------------------------------------------------------------ */
.icon-file {
    position: relative;
}
.icon-file::before {
    content: '';
    display: block;
    width: 22px;
    height: 26px;
    background: white;
    border: 1px solid #000;
    margin: 3px auto;
}
.icon-file::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0 0;
    border-color: #c0c0c0 #000 transparent transparent;
    position: absolute;
    top: 3px;
    right: 5px;
}

/* ============================================================
   Small icon variant (16x16 for taskbar/title bar)
   Renders inside a .taskbar-icon-clip container (16x16, overflow:hidden).
   scale(0.5) shrinks the ~32px CSS icon to ~16px; positioned absolutely
   so the clip container controls the visible area.
   ============================================================ */
.icon-sm {
    transform: scale(0.5);
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
}