/* --- CORE STYLING & THEME --- */
:root {
    --bg-color: #008080;
    --ui-bg: #C0C0C0;
    --ui-border-highlight: #FFFFFF;
    --ui-border-shadow: #808080;
    --title-bar-active: #000080;
    --title-bar-inactive: #808080;
    --font: 'MS Sans Serif', 'Tahoma', 'Verdana', sans-serif;
}
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: var(--font); font-size: 16px; }
body { background-color: var(--bg-color); background-size: cover; background-position: center; user-select: none; }

/* --- UI ELEMENTS (Bevels and Borders) --- */
.bevel-out { border: 2px solid; border-color: var(--ui-border-highlight) var(--ui-border-shadow) var(--ui-border-shadow) var(--ui-border-highlight); box-shadow: inset 1px 1px 0 1px #dfdfdf; }
.bevel-in { border: 2px solid; border-color: var(--ui-border-shadow) var(--ui-border-highlight) var(--ui-border-highlight) var(--ui-border-shadow); }

/* --- DESKTOP ICONS --- */
#desktop { position: relative; height: calc(100% - 40px); width: 100%; }
.desktop-icon { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; width: 80px; cursor: pointer; padding: 5px; }
.desktop-icon .icon-graphic { width: 50px; height: 50px; margin-bottom: 5px; position: relative; }
.desktop-icon .icon-label { color: white; text-shadow: 1px 1px 2px black; padding: 2px 4px; }
.desktop-icon.selected .icon-label { background-color: var(--title-bar-active); }

/* --- ICONS (Pure CSS) --- */
.icon-graphic.folder::before { content: ''; position: absolute; width: 100%; height: 80%; background-color: #FFD700; border-radius: 2px; bottom: 0; border: 1px solid #c9a700; }
.icon-graphic.folder::after { content: ''; position: absolute; width: 50%; height: 20%; background-color: #FFD700; border-radius: 2px 2px 0 0; top: 5px; left: 2px; border: 1px solid #c9a700; border-bottom: none; }
.icon-graphic.document::before { content: ''; position: absolute; width: 80%; height: 100%; background: white; border: 1px solid #aaa; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); }
.icon-graphic.document::after { content: ''; position: absolute; top: 10px; left: 10%; width: 60%; height: 3px; background: #ccc; box-shadow: 0 8px 0 #ccc, 0 16px 0 #ccc; }
.icon-graphic.settings::before { content: '⚙️'; font-size: 48px; line-height: 50px; text-align: center; width: 100%; height: 100%; display: block; }
.icon-graphic.guestbook::before { content: '📖'; font-size: 48px; line-height: 50px; text-align: center; width: 100%; height: 100%; display: block; }
.icon-graphic.notepad::before { content: '📝'; font-size: 48px; line-height: 50px; text-align: center; width: 100%; height: 100%; display: block; }
.icon-graphic.game::before { content: '💣'; font-size: 48px; line-height: 50px; text-align: center; width: 100%; height: 100%; display: block; }

/* --- WINDOWS --- */
.window { position: absolute; background-color: var(--ui-bg); box-shadow: 2px 2px 5px rgba(0,0,0,0.5); min-width: 250px; min-height: 150px; display: flex; flex-direction: column; max-width: 100%; max-height: 100%; box-sizing: border-box; }
.window-title-bar { height: 28px; background-color: var(--title-bar-active); color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 5px; font-weight: bold; flex-shrink: 0; cursor: move; }
.window.inactive .window-title-bar { background-color: var(--title-bar-inactive); }
.window-title-bar-buttons button { width: 20px; height: 20px; background-color: var(--ui-bg); border: none; font-weight: bold; padding: 0; margin-left: 2px; line-height: 18px; }
.window-content { flex-grow: 1; padding: 10px; overflow-y: auto; background: white; margin: 3px; display: flex; flex-direction: column; }
.window-resize-handle { position: absolute; bottom: 0; right: 0; width: 15px; height: 15px; cursor: se-resize; }

/* --- TASKBAR --- */
#taskbar { position: fixed; bottom: 0; left: 0; right: 0; height: 40px; background-color: var(--ui-bg); display: flex; align-items: center; padding: 4px; z-index: 10000; }
#shutdown-button { height: 100%; padding: 0 10px; font-weight: bold; display: flex; align-items: center; cursor: pointer; }
#shutdown-button:active { border-style: inset; }
#version-display { height: 100%; padding: 0 10px; margin-left: 4px; display: flex; align-items: center; box-sizing: border-box; font-weight: bold; animation: rainbow-text 6s linear infinite; }
#taskbar-clock { margin-left: auto; padding: 5px 10px; height: 100%; box-sizing: border-box; }

/* --- APP SPECIFIC STYLES --- */
.projects-list a { display: block; padding: 8px; margin-bottom: 5px; background: #f0f0f0; text-decoration: none; color: #333; border-radius: 3px; transition: background 0.2s; }
.projects-list a:hover { background: #e0e0e0; }
.projects-list strong { display: block; font-size: 1.1em; }
.theme-settings .color-swatch { width: 30px; height: 30px; border: 2px solid #fff; margin: 5px; cursor: pointer; display: inline-block; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); }

/* --- Guestbook Styles --- */
.guestbook-entry { border-bottom: 1px solid #eee; padding: 8px 0; }
.guestbook-entry:last-child { border-bottom: none; }
.guestbook-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.guestbook-timestamp { font-size: 0.8em; color: #666; }
.guestbook-entry strong { color: var(--title-bar-active); }
.guestbook-entry p { margin: 0; white-space: pre-wrap; word-break: break-word; }
#guestbook-form { margin-top: 15px; display: flex; flex-direction: column; gap: 5px; }
#guestbook-form input, #guestbook-form textarea { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #ccc; }
#guestbook-form button { align-self: flex-end; padding: 5px 10px; }
#guestbook-char-counter { text-align: right; font-size: 0.8em; color: #666; margin-top: -2px; padding-right: 2px; }
#guestbook-pagination { display: flex; justify-content: center; align-items: center; padding: 10px 0 5px 0; border-top: 1px solid #eee; margin-top: 10px; }
#guestbook-pagination button { background-color: var(--ui-bg); font-weight: bold; padding: 4px 8px; cursor: pointer; }
#guestbook-pagination button:active { border-style: inset; }
#guestbook-pagination button:disabled { color: var(--ui-border-shadow); cursor: not-allowed; border-style: inset; }

/* --- Notepad Styles --- */
.notepad-textarea { flex-grow: 1; resize: none; border: none; outline: none; font-family: 'Courier New', monospace; font-size: 1rem; line-height: 1.4; padding: 0; margin: 0; }

/* --- Minesweeper Styles --- */
.minesweeper-container { display: flex; flex-direction: column; gap: 10px; background: var(--ui-bg); padding: 5px; margin: -10px; }
.minesweeper-controls { display: flex; justify-content: space-between; align-items: center; padding: 5px; background: var(--ui-bg); }
.minesweeper-controls .reset-button { padding: 5px 10px; }
.minesweeper-status { padding: 5px 10px; background: black; color: #00ff00; font-family: 'Courier New', monospace; }
.minesweeper-grid { display: grid; gap: 1px; background-color: var(--ui-border-shadow); border: 1px solid var(--ui-border-shadow); }
.mine-cell { width: 25px; height: 25px; background-color: var(--ui-bg); text-align: center; line-height: 25px; font-weight: bold; font-size: 14px; cursor: pointer; user-select: none; }
.mine-cell.revealed { background: #bbb; }
.mine-cell.flagged { font-size: 18px; line-height: 26px; }
.mine-cell.mine { background: #ff4141; }
.mine-cell.c1 { color: #0000ff; } .mine-cell.c2 { color: #008000; } .mine-cell.c3 { color: #ff0000; }
.mine-cell.c4 { color: #000080; } .mine-cell.c5 { color: #800000; } .mine-cell.c6 { color: #008080; }
.mine-cell.c7 { color: #000000; } .mine-cell.c8 { color: #808080; }

/* --- ANIMATIONS --- */
@keyframes rainbow-text {
    0%, 100% { color: #00ffff; }
    25% { color: #ff00ff; }
    50% { color: #ffff00; }
    75% { color: #00ff00; }
}