/* SOUNDSSHEEP TRAPFOUNDRY - CLOUD STYLES v3.3.5 */
@font-face {
    font-family: 'Chicago';
    src: url('https://fonts.cdnfonts.com/s/14890/Chicago.woff') format('woff');
}

.sheep-os-container {
    --mac-bg: #c0c0c0;
    --mac-border-light: #fff;
    --mac-border-dark: #808080;
    --mac-desktop-fallback: #000;
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    margin: 0; padding: 0; overflow: hidden;
    font-family: 'Chicago', 'Geneva', sans-serif;
    background-color: var(--mac-desktop-fallback);
    z-index: 9999;
}

.sheep-desktop {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    
    /* Anti-Flashbang: Subtle dark tint blend to keep icons visible */
    background-color: rgba(0, 0, 0, 0.35); 
    background-blend-mode: darken;
    
    /* Updated Background Image */
    background-image: url('https://imgproxy.fourthwall.com/SoBKsKKdjiWQOInZW5qvQrEeW8yYl1sL3mPALtSKjpU/w:1920/sm:1/enc/MQRd5_UqDHHSxSbG/Mmk5ydZvjzxL94Ac/VfTmXUc5ctdqO-so/x9635Y39gahAvSkQ/hZ5AW4JdsRxWxYhk/dwQpFT9HcpxyEMqE/FGjmsqEBp3MwiAtY/z7gAuyRvtTKNiGMw/fhGOQTJPlug8D2fs/xTVmnjhvyY8OSlCK/oXlXag6ysVWZr-QZ/6McSn4jcmmhMPOxy/FtLomUfxhD7SEVEy/cHXxQ5lq-cg8S7iW/_svpkE_a6UT1uU-P/sfHSqMEdNel3ubkP');
    
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover;
    
    /* Soften the image slightly to avoid eye strain */
    filter: brightness(0.9) contrast(1.05);
}

.mac-menu-bar {
    height: 24px; background: #c0c0c0; border-bottom: 1px solid #000;
    display: flex; align-items: center; padding: 0; font-size: 13px;
    z-index: 2000; box-shadow: inset 0 1px 0 #fff;
}

.menu-item {
    padding: 0 12px; height: 100%; display: flex; align-items: center;
    cursor: pointer; color: #000; user-select: none;
}
.menu-item:hover { background: #000; color: #fff !important; }
.menu-item:hover .logo-icon { filter: invert(1); }
.logo-icon { height: 16px; width: auto; filter: brightness(0); }

.desktop-container {
    flex-grow: 1; display: flex; flex-direction: column;
    padding: 40px; gap: 60px; overflow-y: auto;
}

.lane { position: relative; min-height: 240px; width: 100%; }

.lane-header { 
    display: flex; align-items: center; margin-bottom: 15px;
    position: relative; z-index: 2;
}

.lane-label {
    font-size: 11px; color: #fff; text-transform: uppercase; letter-spacing: 2.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); width: fit-content; pointer-events: none;
    padding-bottom: 2px;
}

.icon-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    grid-auto-rows: 120px; gap: 20px; align-content: start; position: relative;
    width: 100%;
}

.desktop-icon {
    display: flex; flex-direction: column; align-items: center;
    width: 100px; cursor: grab; user-select: none; z-index: 5;
}
.desktop-icon img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }

.dvd-icon { cursor: pointer !important; }
.dvd-icon img { 
    width: 70px; height: 70px; margin-top: -3px; 
    image-rendering: auto !important;
}

.icon-label {
    margin-top: 6px; background: #fff; color: #000; padding: 1px 6px; font-size: 11px;
    border: 1px solid #000; text-align: center; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; box-shadow: 1px 1px 0 #000; pointer-events: none;
}

.mac-window {
    position: absolute; background: #c0c0c0; border: 1px solid #000;
    box-shadow: 2px 2px 0 #000; width: 420px; z-index: 500; display: none; flex-direction: column;
}

.title-bar {
    height: 18px; margin: 2px; display: flex; align-items: center; justify-content: center;
    position: relative; cursor: move; 
    background: repeating-linear-gradient(0deg, #000, #000 1px, transparent 1px, transparent 2px);
    background-size: 100% 2px; user-select: none;
}
.title-text { background: #c0c0c0; padding: 0 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.close-box { position: absolute; left: 4px; width: 12px; height: 12px; border: 1px solid #000; background: #fff; cursor: pointer; }

.window-content { padding: 10px; background: #fff; margin: 0 2px 2px 2px; border: 1px solid #808080; display: flex; flex-direction: column; gap: 10px; }
.waveform-container { width: 100%; height: 52px; background: #fff; position: relative; overflow: hidden; border: 1px solid #000; cursor: pointer; padding: 8px 12px; }
.waveform-img { width: 100%; height: 100%; object-fit: fill; filter: brightness(0); }
.play-progress { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: rgba(0, 0, 0, 0.05); border-right: 1px solid #000; pointer-events: none; }
.mac-button { padding: 3px 12px; background: #c0c0c0; border-top: 1.5px solid #fff; border-left: 1.5px solid #fff; border-right: 1.5px solid #808080; border-bottom: 1.5px solid #808080; font-size: 10px; cursor: pointer; }

.info-panel { font-size: 9px; background: #f8f8f8; padding: 6px; border: 1px inset #fff; display: flex; flex-wrap: wrap; gap: 12px; }
.info-panel b { text-transform: uppercase; color: #666; font-size: 8px; }

.info-window { width: 520px; }
.info-content {
    display: flex; gap: 20px; padding: 15px; background: #fff;
    border: 1px solid #808080; margin: 0 2px 2px 2px;
    max-height: 400px;
}
.info-character-img { width: 160px; height: auto; object-fit: contain; flex-shrink: 0; }
.info-text-side {
    flex: 1; font-size: 11px; line-height: 1.6; color: #000;
    overflow-y: auto; padding-right: 10px;
}
.info-text-side::-webkit-scrollbar { width: 10px; }
.info-text-side::-webkit-scrollbar-track { background: #dcdcdc; border: 1px inset #fff; }
.info-text-side::-webkit-scrollbar-thumb { background: #c0c0c0; border: 1.5px solid #fff; border-right-color: #808080; border-bottom-color: #808080; }
.info-text-side b { display: block; margin-bottom: 10px; font-size: 14px; border-bottom: 1px solid #000; padding-bottom: 2px; }

.artwork-widget {
    position: absolute; right: 30px; bottom: 30px; width: 150px;
    background: #c0c0c0; border: 1px solid #000; padding: 2px;
    box-shadow: 2px 2px 0 #000; z-index: 10; display: flex; flex-direction: column;
    height: fit-content; transition: width 0.25s ease-out;
}
.artwork-widget.expanded { width: 420px; box-shadow: 6px 6px 0 rgba(0,0,0,0.5); }
.artwork-widget img { width: 100%; border: 1px solid #000; display: block; margin: 0; padding: 0; cursor: pointer; }

#boot-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.boot-progress-bar { width: 160px; height: 16px; border: 1px solid #000; padding: 2px; }
#load-progress { height: 100%; background: #000; width: 0%; transition: width 0.1s linear; }

#silly-tooltip { position: fixed; pointer-events: none; background: #fff; border: 1px solid #000; padding: 4px 10px; font-size: 10px; box-shadow: 2px 2px 0 #000; z-index: 10001; display: none; white-space: nowrap; color: #000; }

/* Retro Analog Clock Styles */
.retro-clock {
    width: 120px; height: 120px;
    border: 3px solid #000; border-radius: 50%;
    background: #fff; position: relative;
    box-shadow: inset 1px 1px 0 #808080;
}
.clock-center {
    position: absolute; width: 6px; height: 6px;
    background: #000; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10;
}
.hand { position: absolute; bottom: 50%; left: 50%; background: #000; transform-origin: bottom center; }
.hour-hand { width: 4px; height: 30px; margin-left: -2px; }
.min-hand { width: 3px; height: 45px; margin-left: -1.5px; }
.sec-hand { width: 1px; height: 50px; margin-left: -0.5px; background: #000; }
.retro-clock::before {
    content: ''; position: absolute; top: 5px; left: 50%; bottom: 5px;
    width: 2px; background: repeating-linear-gradient(to bottom, #000, #000 2px, transparent 2px, transparent 100%);
    margin-left: -1px;
}