/* style.css - Windows 95 Theme (v33 - W95Font) */

@font-face {
    font-family: 'W95font';
    src: url('font/w95font/webfont/w95font.woff2') format('woff2'),
         url('font/w95font/webfont/w95font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'W95font';
    src: url('font/w95font/webfont/w95font-bold.woff2') format('woff2'),
         url('font/w95font/webfont/w95font-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* --- Root Variables --- */
:root {
    --win95-teal: #008080;
    --win95-gray: #C0C0C0;
    --win95-gray-dark: #808080;
    --win95-gray-light: #DFDFDF;
    --win95-white: #FFFFFF;
    --win95-black: #000000;
    --win95-blue-title: #000080;
    --win95-blue-bsod: #0000AA;
    --win95-font-main: 'W95font', sans-serif; /* Use W95font */
    --base-font-size: 13px;
    --taskbar-height: 57px;
    --start-button-height: 48px;
    --start-button-width: 104px;
    --taskbar-font-size: 18px;
    --start-button-font-size: 23px;
    --start-button-icon-scale: 1.1;
    --taskbar-item-width: 150px; /* Adjusted width */
}

/* --- General Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    overflow: hidden;
    font-family: var(--win95-font-main); /* Apply main font */
    font-size: var(--base-font-size); /* Apply base size */
    line-height: 1.5;
    background-color: var(--win95-teal); /* Moved from .desktop for body */
    color: var(--win95-black);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.desktop { background-color: var(--win95-teal); width: 100%; height: 100%; position: relative; overflow: hidden; }

/* --- Desktop Title (MOTD) Styling --- */
.desktop-title { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); text-align: center; color: var(--win95-black); z-index: 1; pointer-events: none; user-select: none; }
.desktop-title-line {
    font-family: var(--win95-font-main);
    font-weight: 600; /* Make title slightly bolder */
    color: var(--win95-black);
    text-shadow: 1px 1px var(--win95-gray); /* Subtle shadow */
    margin-bottom: 5px;
    font-size: 36px; /* Adjusted size */
    line-height: 1.2;
}

/* --- Hello Name Styling --- */
.hello-name {
    position: absolute;
    bottom: calc(var(--taskbar-height) + 10px); /* Closer to taskbar */
    right: 15px;
    font-family: var(--win95-font-main);
    font-weight: var(--font-weight-main);
    font-size: 14px; /* Adjusted size */
    color: var(--win95-white);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5); /* Subtle shadow */
    z-index: 101;
    cursor: default;
    user-select: none;
}
.hello-name.clickable { cursor: pointer; }
.hello-name.clickable:hover { text-decoration: underline; }

/* --- Taskbar --- */
.taskbar { background-color: var(--win95-gray); border-top: 1px solid var(--win95-gray-light); position: fixed; bottom: 0; left: 0; right: 0; height: var(--taskbar-height); z-index: 100; display: flex; align-items: center; padding: 2px 3px; transition: height 0.2s ease-out; }
.start-button { background-color: var(--win95-gray); border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light); padding: 3px 8px 3px 6px; font-weight: bold; /* Keep Start bold */ cursor: pointer; display: flex; align-items: center; margin-right: 4px; font-family: var(--win95-font-main); font-size: var(--start-button-font-size); height: var(--start-button-height); min-width: var(--start-button-width); flex-shrink: 0; transition: height 0.2s ease-out, min-width 0.2s ease-out, font-size 0.2s ease-out; overflow: hidden; white-space: nowrap; }
/* Style for the Start button when the .pressed class is added by JS */
.start-button.pressed {
    /* --- Inset Border (reversed light/dark source) --- */
    /* Use the existing border colors but swap their positions */
    border-top-color: var(--win95-gray-dark);    /* Was white */
    border-left-color: var(--win95-gray-dark);   /* Was white */
    border-bottom-color: var(--win95-white);     /* Was dark */
    border-right-color: var(--win95-white);      /* Was dark */
    box-shadow: inset 1px 1px 0px var(--win95-gray-dark); /* Darker inset shadow */

    /* --- Content Shift (adjust padding based on original .start-button padding) --- */
    /* Original padding: 3px 8px 3px 6px (top right bottom left) */
    /* Add 1px to top/left, subtract 1px from bottom/right */
    padding: 4px 7px 2px 7px;

    /* Prevent text selection while button is held down */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.start-button .start-icon { margin-right: 5px; font-size: calc(var(--start-button-font-size) * 1.1); display: inline-block; vertical-align: middle; line-height: 1; }
.start-button span:last-child { margin-top: 0; display: inline-block; vertical-align: middle; }

/* --- MP3 Player Styles --- */
.mp3-player { display: flex; align-items: center; height: calc(var(--start-button-height) - 0px); margin: 0 4px; padding: 0 4px; border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-gray-light); border-left-color: var(--win95-gray-light); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); background-color: var(--win95-gray); flex-shrink: 0; }
.mp3-button { background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light); font-family: sans-serif; font-size: calc(var(--taskbar-font-size) * 0.85); line-height: 1; padding: 2px 4px; margin: 0 2px; height: calc(100% - 6px); min-width: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mp3-button:active { border-top-color: var(--win95-gray-dark); border-left-color: var(--win95-gray-dark); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); box-shadow: inset 1px 1px 0px var(--win95-gray-dark); padding: 3px 3px 1px 5px; }
.mp3-button:disabled { color: var(--win95-gray-dark); text-shadow: 1px 1px 0 var(--win95-white); cursor: default; opacity: 0.7; }
.track-display-container { margin-left: 4px; padding: 0 6px; background-color: var(--win95-white); border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-black); border-left-color: var(--win95-black); height: calc(100% - 6px); display: flex; align-items: center; overflow: hidden; width: 160px; flex-shrink: 0; }
.track-display { font-family: var(--win95-font-main); font-weight: var(--font-weight-main); font-size: var(--taskbar-font-size); color: var(--win95-black); white-space: nowrap; }

/* --- Taskbar Window Items & Tray --- */
.taskbar-windows { display: flex; align-items: center; height: 100%; overflow: hidden; flex-grow: 1; margin: 0 4px; gap: 3px; }
.taskbar-window-item { background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light); padding: 4px 8px; font-size: var(--taskbar-font-size); height: calc(var(--start-button-height) - 0px); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: var(--taskbar-item-width); max-width: var(--taskbar-item-width); flex-shrink: 0; cursor: pointer; font-family: var(--win95-font-main); font-weight: var(--font-weight-main); transition: height 0.2s ease-out, font-size 0.2s ease-out; }
.taskbar-window-item.active { background-color: var(--win95-gray-dark); border-top-color: var(--win95-black); border-left-color: var(--win95-black); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); box-shadow: inset 1px 1px 0px var(--win95-gray-dark); font-weight: 600; /* Slightly bolder for active */ }
.taskbar-tray { margin-left: auto; border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-gray-light); border-left-color: var(--win95-gray-light); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); padding: 3px 8px; height: calc(var(--start-button-height) - 0px); display: flex; align-items: center; font-size: var(--taskbar-font-size); background-color: var(--win95-gray); white-space: nowrap; flex-shrink: 0; font-family: var(--win95-font-main); font-weight: var(--font-weight-main); transition: height 0.2s ease-out, font-size 0.2s ease-out; }
#user-level-icon { margin-right: 8px; display: inline-block; vertical-align: middle; font-family: sans-serif; font-size: 1.1em; }
#ip-display { color: var(--win95-black); margin-right: 12px; } #date-display { margin-right: 12px; } #clock-display { margin-right: 5px; }

/* --- Start Menu & Submenus --- */
.start-menu { display: none; position: absolute; bottom: calc(var(--taskbar-height) - 1px); left: 2px; background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light), 2px 2px 3px rgba(0,0,0,0.3); min-width: 180px; padding: 3px; z-index: 110; font-family: var(--win95-font-main); transition: bottom 0.2s ease-out; }
.start-menu.active { display: block; } .start-menu ul { list-style: none; margin: 0; padding: 0; } .start-menu li { margin: 0; position: relative; text-align: left; }
.start-menu a, .start-menu .menu-item-toggle { display: flex; align-items: center; padding: 5px 10px; color: var(--win95-black); text-decoration: none; font-size: 14px; cursor: default; white-space: nowrap; text-align: left; font-weight: var(--font-weight-main); }
.start-menu .menu-item-toggle { position: relative; padding-right: 20px; }
.start-menu a .menu-icon, .start-menu .menu-item-toggle .menu-icon { margin-right: 6px; font-size: 14px; min-width: 18px; text-align: center; display: inline-block; vertical-align: middle; flex-shrink: 0; font-family: sans-serif; }
.start-menu a:hover, .start-menu .menu-item-toggle:hover { background-color: var(--win95-blue-title); color: var(--win95-white); }
.start-menu #color-menu-toggle::after, .start-menu #window-size-toggle::after, .menu-item-folder::after { content: '►'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; font-family: sans-serif; }
.menu-separator { height: 1px; background-color: var(--win95-gray-dark); border-bottom: 1px solid var(--win95-white); margin: 3px 0; padding: 0 !important; }
.menu-item-folder { justify-content: flex-start; padding-right: 20px !important; } .menu-item-folder .folder-icon { width: 1.2em; line-height: 1; font-family: sans-serif; } .menu-item-folder .folder-icon::before { content: '📁'; }
.submenu { display: none; position: absolute; background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light), 2px 2px 3px rgba(0,0,0,0.3); min-width: 130px; padding: 3px; z-index: 120; }
.submenu.active { display: block; } .submenu ul { list-style: none; margin: 0; padding: 0; } .submenu li { margin: 0; }
.submenu a { display: flex; align-items: center; padding: 4px 8px; color: var(--win95-black); text-decoration: none; font-size: 14px; white-space: nowrap; font-family: var(--win95-font-main); font-weight: var(--font-weight-main); }
.submenu a:hover { background-color: var(--win95-blue-title); color: var(--win95-white); }
.submenu a .menu-icon { margin-right: 6px; font-size: 14px; min-width: 15px; text-align: center; font-family: sans-serif; }
.color-swatch { width: 16px; height: 16px; border: 1px solid var(--win95-gray-dark); margin-right: 8px; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.folder-submenu { left: 100%; top: -3px; bottom: auto; } #color-submenu, #window-size-submenu { left: 100%; top: auto; bottom: 0; }

/* --- Browser Window & Content --- */
#window-template { display: none; } .browser-window { position: absolute; background-color: var(--win95-gray); border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-black); border-right-color: var(--win95-black); box-shadow: inset 1px 1px 0px var(--win95-gray-light), 2px 2px 3px rgba(0,0,0,0.4); display: flex; flex-direction: column; z-index: 50; overflow: hidden; resize: both; }

.resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background-image:
        linear-gradient(135deg, var(--win95-gray) 25%, transparent 25%),
        linear-gradient(225deg, var(--win95-gray) 25%, transparent 25%),
        linear-gradient(315deg, var(--win95-gray) 25%, transparent 25%),
        linear-gradient(45deg, var(--win95-gray) 25%, transparent 25%);
    background-size: 8px 8px;
    background-position: -3px -3px;
    cursor: nwse-resize;
    z-index: 10;
}

.browser-window.active-window { z-index: 60; }
.title-bar { background-color: var(--win95-blue-title); color: var(--win95-white); padding: 3px 5px 4px 5px; font-weight: bold; font-size: 13px; height: 22px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; cursor: move; user-select: none; font-family: var(--win95-font-main); }
.title-bar-text { flex-grow: 1; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.title-bar-buttons { display: flex; gap: 2px; flex-shrink: 0; } .window-button { background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light); color: var(--win95-black); font-family: sans-serif; font-size: 11px; width: 18px; height: 16px; display: flex; align-items: center; justify-content: center; font-weight: bold; padding: 0; padding-bottom: 1px; cursor: default; line-height: 1; }
.window-button.maximize::before { content: "🗖"; font-size: 9px; } .window-button.close::before { content: "X"; }
.browser-content { background-color: var(--win95-white); border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-black); border-left-color: var(--win95-black); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); margin: 3px; padding: 10px; flex-grow: 1; overflow-y: auto; overflow-x: hidden; color: var(--win95-black); font-family: var(--win95-font-main); font-weight: var(--font-weight-main); font-size: 14px; position: relative; }
.browser-content > .game-body-wrapper { padding: 0; border: none; margin: 0; } .browser-content iframe { display: block; width: 100%; height: 100%; border: none; }
.browser-content h2 { color: var(--win95-black); font-family: var(--win95-font-main); margin-bottom: 10px; border-bottom: 1px solid var(--win95-gray); padding-bottom: 5px; font-size: 16px; font-weight: normal; }
.browser-content p { margin-bottom: 1em; line-height: 1.4; font-size: 14px; } .browser-content a { color: blue; text-decoration: underline; } .browser-content a:hover { color: darkviolet; } .browser-content ul, .browser-content ol { padding-left: 25px; margin-bottom: 1em; } .browser-content li { margin-bottom: 0.5em; }
.win95-button { background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light); padding: 5px 12px; font-family: var(--win95-font-main); font-size: 14px; cursor: pointer; display: inline-block; text-align: center; min-width: 75px; font-weight: normal; }
.win95-button:active { border-top-color: var(--win95-gray-dark); border-left-color: var(--win95-gray-dark); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); box-shadow: inset 1px 1px 0px var(--win95-gray-dark); padding: 6px 11px 4px 13px; }
.error-message { color: #C00000; font-weight: normal; font-size: 14px; }

/* --- BSOD Window --- */
.browser-window.bsod-window { background-color: var(--win95-blue-bsod); border: none; box-shadow: none; z-index: 9999 !important; } .browser-window.bsod-window .title-bar { display: none; } .browser-window.bsod-window .browser-content { background-color: transparent; color: var(--win95-white); font-family: var(--win95-font-main); font-size: 16px; line-height: 1.5; border: none; margin: 0; padding: 30px; overflow: hidden; height: 100%; display: flex; justify-content: center; align-items: center; }
.bsod-content { max-width: 600px; text-align: left; } .bsod-content p { text-align: left; margin-bottom: 1.5em; } .bsod-content .large-text { font-size: 20px; font-weight: normal; text-align: center; margin-bottom: 2em; }

/* --- Popups --- */
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 150; display: none; align-items: center; justify-content: center; } .popup-window { background-color: var(--win95-gray); border: 1px solid var(--win95-black); border-top-color: var(--win95-white); border-left-color: var(--win95-white); border-bottom-color: var(--win95-gray-dark); border-right-color: var(--win95-gray-dark); box-shadow: inset 1px 1px 0px var(--win95-gray-light), 3px 3px 5px rgba(0,0,0,0.4); min-width: 320px; display: flex; flex-direction: column; }
.popup-window .title-bar { background-color: var(--win95-blue-title); color: var(--win95-white); padding: 3px 5px 4px 5px; font-weight: normal; font-size: 14px; height: 22px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; user-select: none; font-family: var(--win95-font-main); }
.popup-window .title-bar-text { flex-grow: 1; padding-left: 4px; } .popup-window .title-bar-buttons { display: none; }
.popup-content { padding: 15px; font-family: var(--win95-font-main); font-size: 14px; } .popup-content p { margin-bottom: 12px; } .popup-content label { display: block; margin-bottom: 4px; font-family: var(--win95-font-main); } .popup-content input[type="text"], .popup-content input[type="password"] { width: 100%; padding: 5px; margin-bottom: 12px; font-family: var(--win95-font-main); font-size: 14px; border: 1px solid var(--win95-gray-dark); border-top-color: var(--win95-black); border-left-color: var(--win95-black); border-bottom-color: var(--win95-white); border-right-color: var(--win95-white); height: 26px; }
.popup-buttons { text-align: center; margin-top: 10px; } .popup-buttons .win95-button { margin: 0 8px; }
.popup-error { color: red; font-size: 14px; margin-top: 8px; margin-bottom: 5px; text-align: center; display: none; min-height: 1em; }

/* Rule to make the login window transparent */
#window-login_control_panel .browser-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Rule to make the login window non-resizable */
#window-login_control_panel {
    resize: none;
}

#window-login_control_panel .resize-handle {
    display: none;
}

#window-index6 .browser-content {
    padding: 0;
    background-color: var(--win95-gray, #C0C0C0);
}