/* Responsywny pulpit Windows 98 */
.desktop {
    width: 100%;
    height: calc(100vh - clamp(24px, 3.5vh, 32px));
    background: url('../assets/wallpapers/tetrycy.jpg') center center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
}

/* Ikony pulpitu - styl Windows 98 */
.desktop-icon {
    position: absolute;
    width: clamp(60px, 8vw, 75px);
    text-align: center;
    cursor: pointer;
    padding: clamp(2px, 0.5vw, 4px);
    border: 1px solid transparent;
    user-select: none;
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
    font-size: clamp(9px, 1.1vw, 11px);
}

.desktop-icon:hover {
    background: rgba(0, 0, 128, 0.3);
    border: 1px dotted #ffffff;
}

.desktop-icon.selected {
    background: #0000ff;
    border: 1px dotted #ffffff;
}

.desktop-icon.selected .icon-label {
    background: #0000ff;
    color: white;
}

.icon-image {
    width: clamp(24px, 4vw, 32px);
    height: clamp(24px, 4vw, 32px);
    margin: 0 auto clamp(2px, 0.5vw, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(16px, 3vw, 24px);
    background: none;
    border: none;
}

.icon-label {
    color: #000000;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 2px;
    border-radius: 0;
    font-weight: normal;
    text-shadow: none;
    word-wrap: break-word;
    line-height: 1.2;
}

/* Unicode ikony */
.icon-computer .icon-image::before { 
    content: "🖥️";
}

.icon-folder .icon-image::before { 
    content: "📁";
}

.icon-trash .icon-image::before { 
    content: "🗑️";
}

/* Responsywność dla tabletów */
@media (max-width: 768px) {
    .desktop {
        height: calc(100vh - clamp(28px, 4vh, 36px));
    }
    
    .desktop-icon {
        width: clamp(50px, 12vw, 65px);
        font-size: clamp(8px, 1.3vw, 10px);
        padding: clamp(1px, 0.4vw, 3px);
    }
    
    .icon-image {
        width: clamp(20px, 6vw, 28px);
        height: clamp(20px, 6vw, 28px);
    }
}

/* Responsywność dla telefonów */
@media (max-width: 480px) {
    .desktop-icon {
        width: clamp(45px, 15vw, 55px);
        padding: clamp(1px, 0.3vw, 2px);
        font-size: clamp(7px, 1.6vw, 9px);
    }
    
    .icon-image {
        width: clamp(18px, 7vw, 24px);
        height: clamp(18px, 7vw, 24px);
    }
}

/* Ikona dokumentu */
.icon-document .icon-image::before { 
    content: "📄";
}
/* Ikona piłki w barwach niemieckiej flagi z nakładającą się cyfrą 2 */
.icon-football .icon-image::before { 
    content: "⚽";
    position: relative;
}

.icon-football .icon-image {
    background: linear-gradient(0deg, #ffce00 0%, #ffce00 33%, #dd0000 33%, #dd0000 66%, #000000 66%, #000000 100%);
    border-radius: 50%;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Ikona Betclic */
.icon-betclic .icon-image {
    background-image: url('../images/betlic_logo_ikona.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Ikona video */
.icon-video .icon-image::before { 
    content: "🎬";
}