:root {
    --taskbar-height: 36px;
    --xp-bg-main: #ece9d8;
    --icon-hover-bg: rgba(49, 106, 197, 0.22);
    --icon-selected-bg: rgba(49, 106, 197, 0.5);
    --desktop-icon-cell-size: 90px;
    --desktop-icon-img-size: 48px;
    --desktop-icon-font-size: 11.5px;
}
.desktop {
    height: 100%; inset: 0; overflow: hidden;
    position: fixed; user-select: none; width: 100%;
    display: none;
    background: url('../../../assets/gui/bgs/wallpaper.webp') center center / cover no-repeat;
}
.desktop.visible { display: block; }
.desktop::before {
    content: none;
}
/* Icons are placed on a snap grid by desktopGrid.js */
.desktop-icons {
    position: absolute; z-index: 1;
    top: 0; left: 0; right: 0; bottom: var(--taskbar-height);
}
.desktop-icon {
    position: absolute; top: 16px; left: 16px;
    align-items: center; border: 1px solid transparent; border-radius: 3px;
    display: flex; flex-direction: column; height: var(--desktop-icon-cell-size);
    justify-content: center; padding: 6px; background: none; cursor: pointer;
    width: var(--desktop-icon-cell-size); font-family: Tahoma, Arial, sans-serif; outline: none;
    touch-action: none;
}
.desktop-icon.dragging { opacity: 0.6; z-index: 2; cursor: default; }
.selection-rect {
    position: absolute; z-index: 2; pointer-events: none;
    border: 1px solid #316ac5; background: rgba(49, 106, 197, 0.25);
}
/* XP selection: blue label and a blue wash over the icon, no box */
.desktop-icon span { padding: 0 2px; }
.desktop-icon.selected span { background: #316ac5; text-shadow: none; }
.desktop-icon:focus-visible span { outline: 1px dotted #fff; }
.desktop-icon .icon-img { position: relative; }
.desktop-icon.selected .icon-img::after {
    content: ""; position: absolute; inset: 0; background: rgba(49, 106, 197, 0.55);
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.desktop-icon .icon-img {
    height: var(--desktop-icon-img-size); width: var(--desktop-icon-img-size);
    margin-bottom: 4px; display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.xp-icon-img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.55));
}
.desktop-icon span {
    color: #fff; font-size: var(--desktop-icon-font-size); font-weight: 400;
    text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7);
    white-space: normal; line-height: 1.2; max-width: 80px;
}
@media (max-width: 768px) {
    :root { --desktop-icon-cell-size: 80px; --desktop-icon-img-size: 40px; --desktop-icon-font-size: 10px; }
}