/* style.css */
/* --- Global & Base --- */
body { margin: 0; font-family: 'Tahoma', 'Lucida Grande', 'Segoe UI', sans-serif; color: black; overflow: hidden; user-select: none; background-color: #008080; }
#wallpaper { position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100%; object-fit: cover; }
#wallpaper-enhancement { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -9; background-image: linear-gradient(rgba(120, 120, 120, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 120, 120, 0.03) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; }

/* --- Boot Screen --- */
#boot-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; color: #A0A0A0; z-index: 50000; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Lucida Console', monospace; opacity: 1; transition: opacity 1s ease-in-out 2.5s; }
.boot-logo { text-align: center; margin-bottom: 30px; }
.boot-logo-win { font-size: 28px; color: #fff; }
.boot-logo-xp { font-size: 32px; color: #E2710D; font-weight: bold; margin-left:2px; position: relative; top: 2px; }
.boot-logo-edition { display: block; font-size: 12px; color: #fff; margin-top: 5px; letter-spacing: 1px; }
.boot-loader-container { width: 200px; height: 10px; background: #555; border: 1px solid #888; margin-bottom: 15px; overflow: hidden; }
.boot-loader { width: 0%; height: 100%; background: linear-gradient(to right, #2A95E3, #7CC3F4); animation: bootLoad 2.5s ease-out 0.5s forwards; }
@keyframes bootLoad { 0% { width: 0%; } 100% { width: 100%; } }
.boot-text { font-size: 14px; }

/* --- Desktop Title --- */
#desktop-title-container { position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); text-align: center; z-index: 5; width: 90%; pointer-events: none; }
.desktop-title-line1 { font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 28px; color: white; text-shadow: 2px 2px 0px #000000, 0 0 8px rgba(0,0,0,0.5); margin-bottom: 18px; letter-spacing: 1.5px; line-height: 1.2; }
.desktop-title-line2 { font-family: 'Press Start 2P', 'Courier New', monospace; font-size: 64px; font-weight: normal; color: white; text-shadow: 3px 3px 0px #000000, 0 0 10px rgba(0,0,0,0.6); line-height: 1.1; }

/* --- Desktop Icons & Visual Fillers --- */
#desktop-icons-container { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 30px); overflow: hidden; z-index: 8; }
.icon { text-align: center; width: 90px; color: white; text-shadow: 1px 1px 1px black; padding: 5px; border-radius: 3px; z-index: 10; cursor: default; box-sizing: border-box; position: absolute; opacity: 0; transition: opacity 0.3s ease-in-out; }
.icon.positioned { opacity: 1; }
.icon:hover { background: rgba(80, 120, 220, 0.4); }
.icon:active { background: rgba(60, 100, 200, 0.5); }
.icon img { width: 48px; height: 48px; pointer-events: none; }
.icon[data-window="minesweeperWindow"] img { width: 56px; height: 56px; }
.icon p { margin: 4px 0 0 0; font-size: 12px; word-wrap: break-word; word-break: break-all; pointer-events: none; }
.is-dragging { opacity: 0.8 !important; cursor: move !important; }

.desktop-file-item { position: absolute; width: 80px; text-align: center; color: white; text-shadow: 1px 1px 1px black; z-index: 9; cursor: default; opacity: 0; transition: opacity 0.5s 0.5s ease-in-out; }
.desktop-file-item.positioned { opacity: 1; }
.desktop-file-item img { width: 40px; height: 40px; opacity: 0.7; }
.desktop-file-item span { display: block; font-size: 11px; margin-top: 2px; }

/* --- Sticky Note --- */
#sticky-note { position: absolute; width: 260px; min-height: 200px; background: #FFFFA0; padding: 15px 20px 20px 20px; box-shadow: 6px 6px 10px rgba(33,33,33,.7); transform: rotate(1.5deg); font-family: 'Kalam', 'Comic Sans MS', cursive; z-index: 11; border: 1px solid #E6E68A; transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; cursor: default; opacity: 0; }
#sticky-note.positioned { opacity: 1; transition: opacity 0.5s 0.2s ease-in-out; }
#sticky-note:hover:not(.is-dragging) { transform: rotate(0deg) scale(1.03); z-index: 12; box-shadow: 8px 8px 12px rgba(33,33,33,.7); }
.sticky-note-header { font-size: 18px; font-weight: 700; color: #4a4a4a; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px dashed #C0C060; text-align: center; }
#sticky-note ul { list-style-type: none; padding-left: 5px; margin: 0; }
#sticky-note li { font-size: 16px; color: #2c2c2c; margin-bottom: 8px; line-height: 1.5; }
#sticky-note li::before { content: "▹ "; color: #666; }

/* --- Windows --- */
.window { position: absolute; min-width: 200px; min-height: 150px; background: #ECE9D8; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #000000; border-bottom: 1px solid #000000; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); display: none; padding: 2px; box-sizing: border-box; z-index: 100; max-width: 100vw; max-height: calc(100vh - 30px); }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
.window.is-opening { display: block !important; animation: fadeIn 0.2s ease-out forwards; }
.window.is-closing { animation: fadeOut 0.15s ease-in forwards; pointer-events: none; }
.title-bar { color: white; padding: 3px 5px; font-weight: bold; font-size: 13px; cursor: move; display: flex; justify-content: space-between; align-items: center; height: 24px; box-sizing: border-box; margin-bottom: 2px; }
.title-bar.active-window-title { background: linear-gradient(to right, #0A246A, #1759CE, #0A246A); }
.title-bar:not(.active-window-title) { background: linear-gradient(to right, #7F9DB9, #B0C4DE, #7F9DB9); color: #DDD; }
.title-bar-buttons { display: flex; }
.title-bar-button { background-color: #D34328; border: 1px solid white; border-right-color: #404040; border-bottom-color: #404040; color: white; font-family: "Marlett", "Webdings", sans-serif; font-size: 10px; width: 19px; height: 17px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-left: 2px; box-shadow: 1px 1px 0px rgba(0,0,0,0.1); padding-bottom: 1px; box-sizing: border-box; }
.title-bar-button:hover { filter: brightness(1.2); }
.title-bar-button:active { border-top-color: #404040; border-left-color: #404040; border-right-color: white; border-bottom-color: white; filter: brightness(0.9); }
.title-bar:not(.active-window-title) .title-bar-button { background-color: #A0A0A0; border-color: #C0C0C0; border-right-color: #606060; border-bottom-color: #606060; color: #505050; }
.window-content { padding: 10px; background: white; height: calc(100% - 28px); box-sizing: border-box; overflow: auto; border: 1px solid #808080; border-top-color: #404040; border-left-color: #404040; border-bottom-color: #FFFFFF; border-right-color: #FFFFFF; }
.window.window-auto-height { width: auto; height: auto; }
.window.window-auto-height > .window-content { height: auto; }
.portfolio-item.video-item video { margin-bottom: 10px; max-width: 100%; border: 1px solid #ccc; background: black;}
.button-link { display: inline-block; padding: 8px 15px; background: #ddd; border: 1px solid #aaa; text-decoration: none; color: black; border-radius: 3px; margin-top: 10px; }
.button-link:hover { background: #ccc; }


/* --- Taskbar & Start Menu --- */
#taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background: linear-gradient(to bottom, #3b77ea 0%, #245edc 100%); border-top: 1px solid #4c87ed; color: white; display: flex; align-items: center; font-size: 12px; font-family: 'Tahoma', sans-serif; padding: 0; box-sizing: border-box; z-index: 20000; }
#start-button-container { position: relative; }
#start-button { background: linear-gradient(to bottom, #7bde53 0%, #58c038 40%, #38a81a 100%); border: 1px solid #3c9a1f; border-top-right-radius: 8px; border-bottom-right-radius: 8px; color: white; padding: 0 20px 0 15px; height: calc(100% - 4px); margin: 2px 0 2px 2px; display: flex; align-items: center; cursor: pointer; font-weight: bold; font-style: italic; font-size: 14px; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); text-shadow: 1px 1px 1px rgba(0,0,0,0.3); }
#start-button:hover { background: linear-gradient(to bottom, #8ff36a 0%, #6ad84a 40%, #49bd2b 100%); }
#start-button.active, #start-button:active { background: linear-gradient(to top, #7bde53 0%, #58c038 40%, #38a81a 100%); border-style: inset; }
#start-menu { display: none; position: absolute; bottom: 28px; left: 0; width: 280px; height: auto; background: linear-gradient(to bottom, #245DDC, #3B77EA); border: 1px outset #4C87ED; box-shadow: 2px -2px 5px rgba(0,0,0,0.3); padding: 2px; color: white; z-index: 21000; }
#start-menu.open { display: block; }
.start-menu-header { background: linear-gradient(to bottom, #0A246A, #1759CE, #0A246A); padding: 5px 10px; display: flex; align-items: center; border-bottom: 1px solid #4C87ED;}
.start-menu-user-pic { width: 32px; height: 32px; border-radius: 3px; margin-right: 10px; border: 1px solid #4C87ED; background: #fff; }
.start-menu-user-name { font-weight: bold; font-size: 13px; }
.start-menu-body { display: flex; }
.start-menu-left { width: 60%; background: #eff5fc; color: black; padding: 5px 0; }
.start-menu-right { width: 40%; background: #d6e7f9; color: black; padding: 5px 0; }
.start-menu-body ul { list-style: none; margin: 0; padding: 0; }
.start-menu-body li { padding: 6px 10px 6px 15px; cursor: pointer; font-size: 11px; display: flex; align-items: center; }
.start-menu-body li:hover { background: #316ac5; color: white; }
.start-menu-body li img { width: 16px; height: 16px; margin-right: 8px; }
.start-menu-separator { border-top: 1px solid #a0a0a0; margin: 5px 0; }
#shutdown-button-startmenu:hover { background: #c00 !important; color: white !important; }
#taskbar-items { display: flex; height: 100%; align-items: center; margin-left: 5px; flex-grow: 1; overflow: hidden; min-width: 0; }
.taskbar-item { background: linear-gradient(to bottom, #5c8ee9 0%, #3e72d8 100%); border: 1px outset #3866b0; padding: 0 10px; height: calc(100% - 6px); margin: 3px 2px 3px 0; display: flex; align-items: center; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 3px; box-shadow: 1px 1px 0px rgba(255,255,255,0.2) inset, -1px -1px 0px rgba(0,0,0,0.1) inset; cursor: pointer; font-size: 11px; color: white; }
.taskbar-item.active, .taskbar-item:active { background: linear-gradient(to top, #5c8ee9 0%, #3e72d8 100%); border-style: inset; font-weight: bold; padding-top: 2px; }
.taskbar-item:hover { filter: brightness(1.1); }
#clock-container { padding: 0 10px; height: 100%; display: flex; align-items: center; border-left: 1px solid #1c4a8e; margin-right: 2px; background: rgba(0,0,0,0.1); }
#clock { font-size: 11px; }

/* --- Minesweeper, Drives, Portfolio Items --- */
#mine-controls { margin-bottom: 10px; text-align: center; }
#mine-controls button { width: 30px; height: 30px; font-size: 18px; background: #c0c0c0; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #7b7b7b; border-bottom: 2px solid #7b7b7b; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
#mine-controls button:active { border-top-color: #7b7b7b; border-left-color: #7b7b7b; border-right-color: #fff; border-bottom-color: #fff; }
#mine-grid { display: grid; gap: 1px; border: 3px inset #808080; background: #c0c0c0; width: fit-content; padding: 2px; margin: 10px auto; }
.cell { width: 24px; height: 24px; background: #bdbdbd; border-top: 2px solid #fff; border-left: 2px solid #fff; border-right: 2px solid #7b7b7b; border-bottom: 2px solid #7b7b7b; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; font-size: 14px; font-family: 'Arial', sans-serif; user-select: none; box-sizing: border-box; }
.cell.revealed { background: #d1d1d1; border: 1px solid #7b7b7b; }
.cell.mine-hit { background-color: red !important; color: white; }
.cell[data-mines="1"] { color: blue; } .cell[data-mines="2"] { color: green; } .cell[data-mines="3"] { color: red; } .cell[data-mines="4"] { color: navy; } .cell[data-mines="5"] { color: maroon; } .cell[data-mines="6"] { color: teal; } .cell[data-mines="7"] { color: black; } .cell[data-mines="8"] { color: dimgray; }
.drive { padding: 8px 10px; background: #f0f0f0; margin: 5px 0; cursor: pointer; border: 1px solid #ccc; border-radius: 3px; display: flex; align-items: center; font-size: 13px; }
.drive:hover { background: #e0e0e0; border-color: #999;}
.drive-icon { width: 20px; height: 20px; margin-right: 8px;}
#paintCanvas { cursor: crosshair; }
/* ... (your CSS before this) ... */

/* --- Portfolio Item Styling (inside windows) --- */
/* Keep your general .portfolio-item, .portfolio-image, .portfolio-description as they are if they work for other windows */
.portfolio-item { margin-bottom: 25px; }
.portfolio-item h3 { font-size: 16px; color: #333; margin-top: 0; margin-bottom: 8px; font-family: 'Tahoma', sans-serif;}
.portfolio-image { /* This is your GENERAL one */
    max-width: 95%; 
    height: auto; 
    border: 1px solid #b0b0b0; 
    display: block; 
    margin-bottom: 8px; 
    margin-left: auto; margin-right: auto; 
}
.portfolio-description { /* This is your GENERAL one */
    font-size: 13px; 
    line-height: 1.5; 
    color: #444; 
    text-align: center; 
}
.window-content hr { border: 0; height: 1px; background: #ccc; margin: 20px 0; }
.video-item video { max-width: 100%; border: 1px solid #ccc; background: black;}


/* --- RECYCLE BIN Specific Styling --- */
#recycleBinWindow .recycle-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Or flex-start */
    gap: 10px;
    padding-top: 10px;
}
#recycleBinWindow .recycle-grid .portfolio-item {
    width: calc(33.33% - 10px); /* 3 items per row, adjust gap subtraction */
    box-sizing: border-box;
    margin-bottom: 10px; /* Consistent margin for grid items */
    padding: 8px;
    background-color: #f9f9f9; /* Slightly different background */
    border: 1px solid #e0e0e0;
    text-align: center; /* Ensures image centers if display:inline-block */
}
#recycleBinWindow .recycle-grid .portfolio-image {
    max-width: 100%;
    height: 120px; /* Slightly taller thumbnails */
    object-fit: contain;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-bottom: 5px;
    display: inline-block; /* Helps with centering */
}
#recycleBinWindow .recycle-grid .portfolio-description { /* Descriptions are hidden for recycle bin */
    display: none;
}
/* Hide <hr> tags if they are directly after a .recycle-grid or inside it between items */
#recycleBinWindow .recycle-grid + hr,
#recycleBinWindow .recycle-grid .portfolio-item + hr {
    display: none;
}

/* Images within the Recycle Bin items - these are your thumbnails */
#recycleBinWindow .recycle-grid .portfolio-image { /* Make this selector more specific */
    max-width: 100%;
    height: 100px;      /* <<<<<< KEY: Fixed height for thumbnails */
    object-fit: contain; /* <<<<<< KEY: Scale image to fit, maintain aspect ratio */
    border: 1px solid #ccc;
    background-color: #fff; /* Background for the image area if it's smaller */
    margin-bottom: 5px;
    display: block; /* Or inline-block if you want text next to it and align */
    margin-left: auto; /* Center if block */
    margin-right: auto; /* Center if block */
}

/* Descriptions within the Recycle Bin items */
#recycleBinWindow .recycle-grid .portfolio-description {
    font-size: 11px;
    color: #555;
    line-height: 1.3;
    margin-top: 5px;
    height: 2.6em; /* Approx 2 lines */
    overflow: hidden;
    /* text-overflow: ellipsis; (often tricky for multi-line) */
}

/* Hide HRs if you are using the recycle-grid structure */
#recycleBinWindow .recycle-grid + hr,
#recycleBinWindow .recycle-grid .portfolio-item + hr {
    display: none;
}


/* Media query adjustments FOR RECYCLE BIN GRID specifically if needed */
@media (max-width: 550px) {
    #recycleBinWindow .recycle-grid .portfolio-item {
        width: calc(50% - 10px); /* 2 items per row */
    }
}
@media (max-width: 380px) {
    #recycleBinWindow .recycle-grid .portfolio-item {
        width: calc(100% - 10px); /* 1 item per row */
    }
}

/* --- End of Recycle Bin Specific Styling --- */


/* --- Shutdown Overlay --- */
/* ... (rest of your CSS) ... */


/* --- Shutdown Overlay --- */
#shutdown-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000080; z-index: 30000; color: white; text-align: center; padding-top: 30vh; font-family: 'Lucida Console', monospace; align-items: center; justify-content: center;}
#shutdown-message { }
#shutdown-message p { font-size: 20px; line-height: 1.6; margin-bottom: 40px; }
#restart-button { padding: 10px 25px; font-size: 16px; background-color: #c0c0c0; border: 2px outset #fff; border-bottom-color: #404040; border-right-color: #404040; cursor: pointer; }
#restart-button:active { border-style: inset; }


/* --- RESPONSIVE ADJUSTMENTS --- */
@media (min-width: 769px) { /* DESKTOP VIEW */
  #desktop-icons-container {} /* JS will position icons absolutely within this */
  .icon { /* position: absolute; already set by JS */ }
  #sticky-note { /* Positioned by JS for desktop */ transform: rotate(1.5deg) !important; bottom: auto !important; max-height: none !important; overflow-y: visible !important;}
}

@media (max-width: 768px) { /* TABLET VIEW - Flexbox flow for icons */
  #desktop-icons-container { display: flex !important; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; padding: 10px; position: absolute !important; top: 70px !important; left: 10px !important; right: 10px !important; bottom: 40px !important; overflow-y: auto !important; }
  .icon { position: relative !important; top: auto !important; left: auto !important; width: 80px; margin: 10px !important; float: none !important; opacity: 1 !important; }
  .icon img { width: 40px; height: 40px; }
  .icon[data-window="minesweeperWindow"] img { width: 48px; height: 48px; }
  .icon p { font-size: 11px; }
  .desktop-file-item { display: none; }
  #desktop-title-container { top: 8vh; } .desktop-title-line1 { font-size: 22px; } .desktop-title-line2 { font-size: 48px; }
  .title-bar { font-size: 12px; height: 22px; } .title-bar-button { width: 17px; height: 15px; font-size: 9px; }
  .window-content { padding: 8px; height: calc(100% - 26px); }
  #taskbar-items { overflow-x: auto; } .taskbar-item { max-width: 100px; flex-shrink: 0; font-size: 10px; padding: 0 8px; }
  #sticky-note { width: 200px !important; font-size: 14px !important; left: auto !important; right: 15px !important; top: 70px !important; transform: rotate(1deg) !important; bottom: auto !important; opacity: 1 !important;}
  .sticky-note-header { font-size: 15px; } #sticky-note li { font-size: 13px; }
  #start-menu { width: 250px; }
}

@media (max-width: 480px) { /* MOBILE VIEW */
  body { overflow-y: auto; }
  #desktop-icons-container { padding: 10px 5px; justify-content: space-around; height: auto; position: relative !important; margin-top: 15vh !important; margin-bottom: 40px !important; }
  .icon { width: 70px !important; margin: 5px !important; opacity: 1 !important; } /* Adjusted icon size for mobile */
  .icon img { width: 36px; height: 36px; }
  .icon[data-window="minesweeperWindow"] img { width: 40px; height: 40px; } /* Adjusted minesweeper icon for mobile */
  .icon p { font-size: 10px; margin-top: 2px; }
  #desktop-title-container { top: 5vh; width: 95%; } .desktop-title-line1 { font-size: 18px; } .desktop-title-line2 { font-size: 36px; }
  .window { min-width: 90vw; left: 5vw !important; top: 5vh !important; width: 90vw !important; height: 80vh !important; } /* More aggressive mobile window sizing */
  .title-bar { font-size: 11px; height: 28px; padding: 2px 4px; }
  .title-bar-button { width: 22px; height: 20px; font-size: 10px; margin-left: 2px;}
  .window-content { padding: 8px; height: calc(100% - 32px); }
  #start-button { font-size: 12px; padding: 0 8px 0 10px; }
  .taskbar-item { font-size: 10px; padding: 0 5px; max-width: 70px;}
  #clock { font-size: 10px; } #clock-container { padding: 0 3px; }
  #sticky-note { width: 80vw !important; font-size: 12px !important; padding: 10px !important; top: auto !important; bottom: 35px !important; left: 50% !important; transform: translateX(-50%) rotate(0deg) !important; max-height: 100px; overflow-y: auto; opacity: 1 !important;} /* Adjusted sticky note for mobile */
  .sticky-note-header { font-size: 13px; margin-bottom: 5px; padding-bottom: 5px; } #sticky-note li { font-size: 11px; margin-bottom: 4px;}
  #start-menu { width: 90vw; left: 5vw; }
  .start-menu-body { flex-direction: column; }
  .start-menu-left, .start-menu-right { width: 100%; }
  .start-menu-right ul { border-top: 1px solid #a0a0a0; margin-top: 5px; padding-top: 5px;}
}