@import "night_mode.css";

:root {
  --win95-bg: #c0c0c0; /* Grey face for most elements */
  --win95-face: #c0c0c0; /* Grey face for most elements */
  --win95-dark: #808080; /* Dark grey for shadows/borders */
  --win95-light: #ffffff; /* White for highlights/borders */
  --win95-title-active-start: #0A246A; /* Dark blue for active title bar */
  --win95-title-active-end: #A6CAF0; /* Light blue for active title bar */
  --win95-title-inactive: #808080; /* Grey for inactive title bar */
  --desktop-bg: #008080; /* Teal desktop background */
  --night-bg: #1a0f0a; /* Dark wooden brown */
  --night-face: #d2b48c; /* Tan/Tanwood for windows */
  --night-title-start: #4a2f1f; /* Dark brown title bar */
  --night-title-end: #6b4433;
  --text: #000000;
  --taskbar: #C0C0C0; /* Taskbar background is face color */
  --zstep: 10;
} 

/* Particles */
#particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* Above desktop, below windows */
  overflow: hidden;
}

.ember {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ff6600;
  border-radius: 50%;
  box-shadow: 0 0 4px #ffcc00, 0 0 8px #ff3300;
  opacity: 0;
  pointer-events: none;
  animation: float-up var(--duration) ease-out forwards;
}

@keyframes float-up {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(var(--drift)) scale(0.5);
    opacity: 0;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  background-color: var(--desktop-bg); /* Teal desktop background */
  color: var(--text);
  font-size: 16px; /* Standard Win95 font size */
  -webkit-font-smoothing: none; /* Pixelated font smoothing */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  text-shadow: none; 
}

/* Fix for iframe lag during drag/resize */
body.is-dragging-window iframe {
  pointer-events: none !important;
}

/* Fallback for pixelated font */
@font-face {
    font-family: 'Pixelated MS Sans Serif';
    src: local('MS Sans Serif'), local('Arial'); /* Try system fonts */
}



/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 17px; /* Standard Win95 scrollbar width */
  height: 17px; /* Standard Win95 scrollbar height for horizontal bars */
}

::-webkit-scrollbar-track {
  background-color: var(--win95-face); /* Base grey color for the track */
}

::-webkit-scrollbar-thumb {
  background-color: var(--win95-face);
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px 0 #000; /* Subtle shadow for depth */
}

/* Hover/Active state for thumb */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--win95-face); /* Stays the same or slightly darker grey */
  border-top-color: var(--win95-dark); /* Invert border for pressed effect */
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

::-webkit-scrollbar-button {
  background-color: var(--win95-face);
  display: block; /* Ensure buttons are visible */
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px 0 #000;
  height: 17px;
  width: 17px;
  font-size: 14px;
  text-align: center;
  color: var(--text);
  line-height: 14px; /* Vertically center arrow */
  user-select: none;
}

/* Hover/Active state for buttons */
::-webkit-scrollbar-button:hover {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

/* Specific arrows for up/down/left/right buttons */
::-webkit-scrollbar-button:vertical:decrement { content: '▲'; } /* Up arrow */
::-webkit-scrollbar-button:vertical:increment { content: '▼'; } /* Down arrow */
::-webkit-scrollbar-button:horizontal:decrement { content: '◀'; } /* Left arrow */
::-webkit-scrollbar-button:horizontal:increment { content: '▶'; } /* Right arrow */

::-webkit-scrollbar-corner {
  background-color: var(--win95-face); /* Corner area where scrollbars meet */
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
}

/* For Firefox */
/* Note: Firefox's scrollbar styling is less granular and does not support button/corner pseudo-elements or detailed 3D effects. */
html {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: var(--win95-dark) var(--win95-face); /* thumb color track color */
}

/* For Microsoft Edge (non-chromium) and other browsers that support standard CSS scrollbar properties */
/* This is a fallback and generally less common now, but good practice. */
.content, .about-me-content, .file-list {
  scrollbar-color: var(--win95-dark) var(--win95-face);
  scrollbar-width: thin;
}

#desktop {
  position: absolute; inset: 0 0 38px 0;
  /* background is now from body --win95-desktop-bg */
}
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
  background: var(--taskbar);
  border-top: 2px solid var(--win95-light);
  border-left: 2px solid var(--win95-light);
  border-right: 2px solid var(--win95-dark);
  border-bottom: 2px solid var(--win95-dark);
  display: flex; align-items: center; gap: 6px; padding: 2px 6px;
  box-shadow: none; /* remove default box-shadow */
}
#start-button, .task-btn {
  height: 34px; padding: 0 10px;
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px #000;
  cursor: pointer;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  display: flex; /* NEW: Make it a flex container for icon and text */
  align-items: center; /* NEW: Vertically center icon and text */
  gap: 6px; /* NEW: Space between icon and text */
}
#start-button:active, .task-btn:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}
/* NEW: Styles for the custom Start button icon */
.start-icon {
  width: 12px; /* Overall size of the 2x2 grid icon */
  height: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  grid-template-rows: repeat(2, 1fr);    /* 2 rows */
  gap: 0.5px; /* Small gap between the squares */
  flex-shrink: 0; /* Prevent the icon from shrinking */
  box-sizing: border-box;
}

.start-icon .square {
  background-color: var(--win95-light); /* Light grey for the squares */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0.5px solid var(--win95-dark); /* Subtle darker border for depth on each square */
}

/* Adjust square border color when the start button is active */
#start-button:active .start-icon .square {
  border-color: var(--win95-light); /* Invert border color to match pressed button state */
}
#taskbar-tasks { display: flex; gap: 4px; align-items: center; overflow-x: auto; }
.task-btn.active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
  outline: none; /* Remove default dotted outline */
}
#clock { margin-left: auto; font-size: 15px; opacity: 0.8; }

#start-menu {
  position: absolute; left: 2px; bottom: 40px; width: 220px;
  background: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 2px 2px 0 #000;
  display: none; flex-direction: column; padding: 2px;
  z-index: 1000; /* NEW: Ensure start menu appears above other windows */
}
#start-menu[aria-hidden="false"] { display: flex; }
.start-header {
  font-weight: bold;
  padding: 4px 6px;
  color: var(--win95-dark);
  border-bottom: 1px solid var(--win95-dark);
  margin: 0 0 6px 0;
}
.start-item {
  text-align: left; border: none; background: transparent; padding: 4px 6px; cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  font-size: 16px;
  user-select: none; /* Prevent text selection */
}
.start-item:hover {
  background: var(--win95-title-active-start);
  color: white;
}
#theme-toggle {
  margin-top: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.05);
}
#theme-toggle:hover {
  border-color: var(--win95-light);
}
.start-item hr {
  border: none;
  border-top: 1px solid var(--win95-dark);
  border-bottom: 1px solid var(--win95-light);
  margin: 4px 0;
}
.start-item:hover hr { border-color: white; } /* If hr is part of item */


.window {
  position: absolute; min-width: 240px; min-height: 160px;
  background: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 2px 2px 0 #00000033;
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack titlebar and content vertically */
  padding: 1px; /* To make internal elements align with the window frame */
}
.titlebar {
  height: 20px;
  background: linear-gradient(to right, var(--win95-title-active-start), var(--win95-title-active-end));
  color: white;
  display: flex; align-items: center; justify-content: space-between; padding: 0 2px;
  user-select: none; cursor: move;
  font-weight: bold;
  font-size: 15px;
  border-top: 1px solid var(--win95-title-active-start);
  border-left: 1px solid var(--win95-title-active-start);
  border-right: 1px solid var(--win95-title-active-end);
  border-bottom: 1px solid var(--win95-title-active-end);
  flex-shrink: 0; /* Don't let titlebar shrink */
}
.title {
  font-weight: bold;
  font-size: 15px;
  padding-left: 3px;
}
.controls button {
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  width: 16px;
  height: 14px;
  font-size: 13px;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  line-height: 12px; /* Centering fix */
  box-shadow: 1px 1px #000;
  text-align: center;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  font-weight: normal; /* Override bold */
}
.controls button:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}
.controls .btn-min::before { content: '🗕'; }
.controls .btn-max::before { content: '🗖'; } /* Default maximize icon */
.controls button[aria-label="Restore"]::before { content: '🗗'; } /* Restore icon when aria-label is 'Restore' */
.controls .btn-close::before { content: '✕'; }

.content {
  padding: 6px;
  background: var(--win95-face);
  height: calc(100% - 20px); /* Adjust height based on new titlebar height */
  overflow: auto;
  border: 2px solid; /* Inner recessed border */
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-bottom-color: var(--win95-light);
  border-right-color: var(--win95-light);
  margin: 3px; /* Creates the inner recessed look */
  flex-grow: 1; /* Allow content to fill space */
}

.resizer { position: absolute; }
.resizer.top-left, .resizer.top-right, .resizer.bottom-left, .resizer.bottom-right { width: 10px; height: 10px; }
.resizer.right, .resizer.left { width: 6px; top: 0; bottom: 0; }
.resizer.top, .resizer.bottom { height: 6px; left: 0; right: 0; }
.resizer.top-left { left: -2px; top: -2px; cursor: nwse-resize; }
.resizer.top-right { right: -2px; top: -2px; cursor: nesw-resize; }
.resizer.bottom-left { left: -2px; bottom: -2px; cursor: nesw-resize; }
.resizer.bottom-right { right: -2px; bottom: -2px; cursor: nwse-resize; }
.resizer.right { right: -2px; cursor: ew-resize; }
.resizer.left { left: -2px; cursor: ew-resize; }
.resizer.top { top: -2px; cursor: ns-resize; }
.resizer.bottom { bottom: -2px; cursor: ns-resize; }

.icon {
  width: 74px; display: inline-flex; flex-direction: column; align-items: center;
  margin: 10px 10px 18px 10px; /* More space below for label, slightly more margin overall */
  cursor: grab; /* Added for drag-and-drop */
  user-select: none;
  position: absolute; /* Added for drag-and-drop */
}
.icon.dragging {
  cursor: grabbing; /* Added for drag-and-drop */
}
.icon-img {
  width: 32px; height: 32px;
  background: var(--win95-face);
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.icon-label {
  text-align: center; font-size: 14px; margin-top: 6px; padding: 2px 4px;
  background: transparent; color: var(--text);
  outline: none;
  text-shadow: none; /* No shadow on normal text */
}
.icon:focus .icon-label, .icon:hover .icon-label {
  background-color: var(--win95-title-active-start);
  color: white;
  text-shadow: none; /* No shadow on selected text */
}

.file-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px;
  padding: 5px;
  border: 2px inset var(--win95-dark); /* Sunken look for the list area */
  background-color: var(--desktop-bg); /* Dark teal background for list area */
}

.file-item {
  display: flex; align-items: center; gap: 8px; padding: 4px; background: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  cursor: default;
  font-size: 16px;
  user-select: none; /* Prevent text selection */
}
.file-item:hover, .file-item:focus {
  background-color: var(--win95-title-active-start);
  color: white;
}
.file-item:hover div, .file-item:focus div {
    color: white;
}
.file-icon {
  width: 20px; height: 18px;
  background: var(--win95-face);
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}
/* NEW: Styles for file name and description within file-item */
.file-item .file-name {
    font-weight: normal; /* Ensure name is not bold by default */
    color: var(--text); /* Default text color */
}

.file-item .file-description {
  font-size: 14px;
  opacity: .7;
  color: var(--text); /* Default text color */
  line-height: 1.2; /* Adjust line height for better readability if description wraps */
}

.file-item:hover .file-name, .file-item:focus .file-name,
.file-item:hover .file-description, .file-item:focus .file-description {
    color: white; /* Ensure text is white on hover/focus */
}

.viewer img {
  max-width: 100%;
  height: auto;
  display: block;
}
.viewer video {
  max-width: 100%; /* Allow video to scale down but not stretch up */
  height: auto;
  display: block;
  background: #000;
  user-select: none; /* Prevent text selection for video controls */
}

.zoomable-viewer {
  position: relative; /* Establish positioning context for the absolute image */
  width: 100%;
  height: 100%;
  cursor: grab; /* Default cursor for grab */
  touch-action: none; /* Prevent browser default touch actions like pan-zoom */
  background-color: black; /* Added: Make background black */
}

.zoomable-viewer img {
  max-width: none; /* Override default img max-width for zoomable image */
  height: auto;
  display: block;
  pointer-events: none; /* Allow events to pass through to the container */
  will-change: transform; /* Hint to browser for smooth animations */
}

/* The base sticker style - Concept Art Collage uses this for its initial state */
.sticker {
  position: absolute; width: 200px; /* Increased width */
  padding: 8px; background: #FFFFD7; color: #000;
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 2px 2px 0 #000;
  transform: rotate(-2deg); /* Initial rotation for generic stickers */
  cursor: grab; /* Added for drag-and-drop */
  user-select: none; font-size: 15px; line-height: 1.3;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  display: flex; /* Make sticker a flex container */
  flex-direction: column; /* Stack elements vertically */
}
.sticker.dragging {
  cursor: grabbing; /* Added for drag-and-drop */
}
.sticker-thumbnail {
  width: 100%; /* Make thumbnail fill sticker width */
  height: auto; /* Maintain aspect ratio */
  max-height: 120px; /* Constrain height */
  object-fit: contain; /* Ensure image fits */
  margin-bottom: 8px; /* Space below thumbnail */
  border: 1px solid var(--win95-dark); /* Simple border for thumbnail */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.sticker:hover {
  box-shadow: 4px 4px 0 #000;
  /* This generic transform is overridden by more specific hover rules below */
  transform: rotate(1deg);
}
.sticker .title {
  font-weight: bold; margin-bottom: 4px;
  color: var(--win95-title-active-start); /* Dark blue title */
}
.sticker .open {
  display:inline-block; margin-top:6px; padding:2px 6px;
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px #000;
  cursor:pointer;
  font-size: 15px;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  user-select: none; /* Prevent text selection */
}
.sticker .open:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

/* NEW: Unique styles for Image Board sticker */
.sticker.image-board-sticker {
    background: #DAE3F0; /* Light grey-blue, inspired by Win95 muted tones */
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    transform: rotate(1deg); /* Keep existing rotation */
}
.sticker.image-board-sticker .title {
    color: var(--win95-title-active-start); /* Dark blue title for contrast */
}
.sticker.image-board-sticker .open {
    /* Revert to default Win95 grey button style */
    background-color: var(--win95-face);
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    box-shadow: 1px 1px #000;
}
.sticker.image-board-sticker .open:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

/* NEW: Unique styles for RTS Game sticker */
.sticker.rts-game-sticker {
    background: #DAE3F0; /* Bluish-grey color */
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    transform: rotate(3deg); /* Initial rotation for RTS Game sticker */
}
.sticker.rts-game-sticker .title {
    color: var(--win95-title-active-start); /* Dark blue title for contrast */
}
.sticker.rts-game-sticker .open {
    /* Revert to default Win95 grey button style */
    background-color: var(--win95-face);
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    box-shadow: 1px 1px #000;
}
.sticker.rts-game-sticker .open:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

/* NEW: Unique styles for Video Trailer sticker */
.sticker.video-sticker {
    background: #DAE3F0; /* Changed to match Image Board sticker */
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    transform: rotate(-4deg); /* Initial rotation for Unsubscribed Trailer sticker */
}
.sticker.video-sticker .title {
    color: var(--win95-title-active-start); /* Dark blue title for contrast */
}
.sticker.video-sticker .open {
    /* Revert to default Win95 grey button style */
    background-color: var(--win95-face);
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    box-shadow: 1px 1px #000;
}
.sticker.video-sticker .open:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}

/* Enhanced hover effects for stickers */
.sticker:hover {
  box-shadow: 4px 4px 0 #000;
  /* This generic transform is overridden by more specific hover rules below */
  transform: rotate(1deg);
}

/* Image Board sticker hover effect */
.sticker.image-board-sticker:hover {
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 #000;
}

/* Video sticker hover effect */
.sticker.video-sticker:hover {
  transform: rotate(-0.5deg); /* Changed from -1deg to -0.5deg */
  box-shadow: 3px 3px 0 #000;
}

/* Concept Art Collage hover effect (enhanced for consistency) */
/* This rule applies to stickers that do NOT have the specific type classes */
.sticker:not(.image-board-sticker):not(.video-sticker):not(.rts-game-sticker):not(.atelier-sticker):hover {
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 #000;
}

/* RTS Game sticker hover effect */
.sticker.rts-game-sticker:hover {
  transform: rotate(0deg); /* Changed from 2deg to 0deg */
  box-shadow: 3px 3px 0 #000;
}

/* Atelier sticker hover effect */
.sticker.atelier-sticker:hover {
  transform: rotate(0deg); /* Slightly less rotation on hover */
  box-shadow: 3px 3px 0 #000;
}

/* NEW: Specific styles for Projects folder list */
.projects-folder-list {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* Accommodate larger items, min 190px */
  gap: 10px; /* Increase gap slightly for larger items */
  /* Ensure it takes remaining vertical space in a flex column */
  flex-grow: 1; 
}

.projects-folder-list .file-item {
  display: flex;
  flex-direction: column; /* Stack icon and text vertically */
  align-items: center; /* Center content horizontally */
  justify-content: flex-start; /* Align content to the top */
  padding: 8px; /* More padding */
  width: 100%; /* Take full grid column width */
  text-align: center; /* Center text */
  height: auto; /* Allow height to adjust based on content */
  /* Reapply basic border style to ensure consistency */
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
}

.projects-folder-list .file-icon {
  width: 160px; /* Larger width for thumbnail, similar to sticker */
  height: 120px; /* Larger height for thumbnail, similar to sticker thumbnailMaxHeight */
  border-width: 2px; /* Thicker border to match sticker look */
  border-style: solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  margin-bottom: 6px; /* Space between icon and text */
  background-size: contain; /* Ensure image fits within the bounds */
  background-position: center; /* Center the image within the icon area */
  background-color: #000; /* Black background for thumbnails to mimic video/image viewers */
}

/* Ensure hover/focus styles are applied correctly for the larger items */
.projects-folder-list .file-item:hover, 
.projects-folder-list .file-item:focus {
  background-color: var(--win95-title-active-start);
  color: white;
  border-top-color: var(--win95-dark); /* Invert border colors on hover/focus */
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
}

.projects-folder-list .file-item:hover div, 
.projects-folder-list .file-item:focus div {
    color: white;
}

/* NEW: Styles for the projects synopsis block */
.projects-synopsis-block {
    background-color: var(--win95-face);
    border: 2px solid;
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    padding: 8px;
    margin: 3px; /* Match the inner content margin of the window */
    font-size: 15px;
    text-align: center;
    flex-shrink: 0; /* Prevent it from shrinking in the flex container */
    margin-bottom: 10px; /* Space between synopsis and file list */
}

.image-viewer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  background: var(--win95-face);
  border-bottom: 2px solid var(--win95-dark); /* Separator from image content */
  flex-shrink: 0;
  user-select: none; /* Prevent text selection */
}

/* NEW: Styles for the image title in the viewer navigation */
.image-title-nav {
  flex-grow: 1;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  margin: 0 10px;
  user-select: none; /* Prevent text selection */
}

.image-viewer-nav button {
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px #000;
  cursor: pointer;
  font-size: 15px;
  padding: 2px 8px;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  user-select: none; /* Prevent text selection */
}
.image-viewer-nav button:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}
.image-viewer-nav button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--win95-dark) var(--win95-light) var(--win95-light) var(--win95-dark); /* Flat look when disabled */
}

/* NEW: Styles for the image loading overlay */
.image-loading-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--win95-face); /* Match window background */
  color: var(--text);
  display: flex; /* Use flex for centering content */
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Prominent loading text */
  font-weight: bold;
  user-select: none; /* Prevent text selection */
  z-index: 1; /* Ensure it's above the image */
}

/* NEW: Styles for video loading overlay */
.video-loading-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--win95-face); /* Match window background */
  color: var(--text);
  display: flex; /* Use flex for centering content */
  justify-content: center;
  align-items: center;
  font-size: 18px; /* Prominent loading text */
  font-weight: bold;
  user-select: none; /* Prevent text selection */
  z-index: 1; /* Ensure it's above the video */
}

/* NEW: Styles for video error message (reusing image error styles) */
/* The .image-error-message class will be applied to video errors too */


.image-error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red; /* Error text in red */
  background-color: var(--win95-face);
  padding: 8px;
  border: 2px solid var(--win95-dark); /* Simple border for thumbnail */
  box-shadow: 2px 2px 0 #000;
  font-size: 16px;
  text-align: center;
  z-index: 2; /* Ensure it's above overlay and image */
  user-select: none;
}

/* Blog Styles */
.blog-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--win95-face);
}

.blog-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.blog-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #000;
  background: #e5e2df; /* Slightly greyish paper color */
  overflow-y: auto;
  padding: 40px;
}

.blog-masthead {
  text-align: center;
  border-bottom: 4px double #000;
  margin-bottom: 30px;
  padding-bottom: 10px;
}

.blog-masthead-title {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -2px;
  margin: 0;
  line-height: 1;
}

.blog-masthead-meta {
  font-family: 'Libre Baskerville', serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #000;
  padding-top: 5px;
}

.blog-post-view {
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.blog-post-header {
  margin-bottom: 30px;
  text-align: center;
}

.blog-post-title {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 900;
  margin: 0 0 10px 0;
  color: #000;
  line-height: 1.1;
}

.blog-post-date {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.blog-post-content {
  font-family: 'Libre Baskerville', serif;
  font-size: 17px;
  line-height: 1.7;
  color: #1a1a1a;
  text-align: justify;
}

.blog-post-content p {
  margin-bottom: 20px;
  text-indent: 0;
}

.blog-comment-line {
  color: #6A9955 !important; /* VS Code comment green */
  font-family: 'JetBrains Mono', 'Fira Code', 'VT323', monospace !important;
  font-style: normal !important;
  text-align: left !important;
  text-justify: none !important;
  margin-bottom: 15px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  opacity: 0.85;
}

.blog-post-content pre {
  background: #000;
  color: #fff;
  padding: 15px;
  border: 2px inset var(--win95-dark);
  overflow-x: auto;
  margin: 20px 0;
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1.4;
}

.blog-post-content code {
  background: #000;
  color: #fff;
  padding: 2px 4px;
  font-family: 'VT323', monospace;
}

.blog-post-content pre code {
  padding: 0;
  background: transparent;
  border: none;
}

.blog-post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}

.blog-link-btn {
  display: inline-block;
  background-color: var(--win95-face);
  color: var(--win95-title-active-start);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  padding: 8px 16px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin: 10px 0;
  transition: all 0.1s;
  cursor: pointer;
  text-shadow: none;
  vertical-align: middle;
}

.blinking-cursor {
  animation: blink-cursor 1s step-end infinite;
  font-weight: bold;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

.blog-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  font-family: 'JetBrains Mono', 'Fira Code', 'VT323', monospace;
  color: var(--win95-title-active-start);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.blog-loading-spinner::after {
  content: '...';
  animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80% { content: '...'; }
}

.blog-link-btn:hover {
  background-color: var(--win95-title-active-start);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

.blog-link-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
}

/* Helper classes for image sizing in Markdown */
.blog-post-content .img-small img { max-width: 300px; }
.blog-post-content .img-medium img { max-width: 500px; }
.blog-post-content .img-center img { margin-left: auto; margin-right: auto; }
.blog-post-content .img-left img { margin-left: 0; margin-right: auto; }
.blog-post-content .img-right img { margin-left: auto; margin-right: 0; }

.blog-post-content p:first-of-type::first-letter {
  float: left;
  font-size: 60px;
  line-height: 50px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
}

.blog-sidebar {
  width: 280px;
  background: var(--win95-face);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  border-left: 1px solid var(--win95-light);
}

.timeline-header {
  font-weight: bold;
  font-size: 12px;
  padding: 8px 12px;
  background: var(--win95-face);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--win95-dark);
  font-family: 'VT323', monospace;
  letter-spacing: 1px;
}

.timeline-controls {
  display: flex;
  gap: 4px;
}

.timeline-controls button {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  background: var(--win95-face);
  color: var(--text);
  border: 1px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-controls button:hover {
  background: #eee;
}

.timeline-controls button:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
}

.timeline-label {
  font-size: 11px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: var(--text);
  font-family: 'VT323', monospace;
  text-transform: uppercase;
}

.timeline-grid-container {
  margin: 10px;
  padding: 15px;
  background: var(--win95-face);
  border: 2px inset var(--win95-dark);
}

.timeline-grid {
  display: grid;
  gap: 3px;
}

.timeline-grid.zoom-overall {
  grid-template-columns: repeat(5, 1fr);
}

.timeline-grid.zoom-year {
  grid-template-columns: repeat(4, 1fr);
}

.timeline-grid.zoom-month {
  grid-template-columns: repeat(7, 1fr);
}

.timeline-square {
  aspect-ratio: 1;
  background: #d8d8d8; /* Lighter empty squares */
  border: 1px solid #b0b0b0;
  transition: all 0.2s ease;
}

.timeline-square.has-post {
  background: #000; /* Black for posts on light background */
  border-color: #000;
  cursor: pointer;
}

.timeline-square.has-post:hover {
  background: #444;
  transform: scale(1.1);
  z-index: 1;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--win95-dark);
}

.post-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--win95-dark);
  cursor: pointer;
  background: var(--win95-face);
  transition: background 0.2s;
}

.post-list-item:hover {
  background: #d0d0d0;
}

.post-list-item.active {
  background: #000;
  color: #fff;
}

.post-list-item.active .post-item-date {
  color: #888;
}

.post-item-title {
  font-size: 14px;
  font-weight: bold;
}

.post-item-date {
  font-size: 11px;
  color: #666;
}

.post-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #000;
  background: #000;
  filter: grayscale(100%);
}

.post-list-item.active .post-thumb {
  border-color: #fff;
  filter: grayscale(0%);
}

.post-info {
  flex: 1;
  overflow: hidden;
}

/* Firebase Comment Styles */
.comments-section {
  margin-top: 40px;
  border-top: 4px double #000;
  padding-top: 20px;
  font-family: 'Libre Baskerville', serif;
}

.comments-header {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.post-item-title {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-item-date {
  font-size: 12px;
  opacity: 0.8;
}

/* Custom Win95 Video Controls */
.win95-video-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: var(--win95-face);
  border-top: 2px solid var(--win95-dark);
  flex-shrink: 0;
  user-select: none;
  height: 28px;
}

.win95-video-controls button {
  width: 24px;
  height: 20px;
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 1px 1px #000;
  cursor: pointer;
  font-family: 'VT333', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.win95-video-controls button:active {
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: none;
}
.win95-video-controls button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  border-color: var(--win95-dark) var(--win95-light) var(--win95-light) var(--win95-dark); /* Flat look when disabled */
}

.win95-video-controls .time-display {
  font-size: 14px;
  color: var(--text);
  min-width: 90px;
  text-align: center;
}

/* Volume Control Container */
.volume-container {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto; /* Push volume to the right */
}

/* Custom styling for range input (seek bar and volume bar) */
.win95-video-controls .seek-bar,
.win95-video-controls .volume-bar {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  height: 20px; /* Match button height */
}
.win95-video-controls .seek-bar { flex-grow: 1; }
.win95-video-controls .volume-bar { width: 70px; }


/* Track */
.win95-video-controls .seek-bar::-webkit-slider-runnable-track,
.win95-video-controls .volume-bar::-webkit-slider-runnable-track {
  background-color: var(--win95-dark);
  height: 2px;
  border-top: 1px solid var(--win95-dark);
  border-left: 1px solid var(--win95-dark);
  border-right: 1px solid var(--win95-light);
  border-bottom: 1px solid var(--win95-light);
}
.win95-video-controls .seek-bar::-moz-range-track,
.win95-video-controls .volume-bar::-moz-range-track {
  background-color: var(--win95-dark);
  height: 2px;
  border-top: 1px solid var(--win95-dark);
  border-left: 1px solid var(--win95-dark);
  border-right: 1px solid var(--win95-light);
  border-bottom: 1px solid var(--win95-light);
}

/* Thumb */
.win95-video-controls .seek-bar::-webkit-slider-thumb,
.win95-video-controls .volume-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -8px; /* (thumb height - track height) / 2 */
  background-color: var(--win95-face);
  height: 18px;
  width: 10px;
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
}
.win95-video-controls .seek-bar::-moz-range-thumb,
.win95-video-controls .volume-bar::-moz-range-thumb {
  background-color: var(--win95-face);
  height: 18px;
  width: 10px;
  border-radius: 0;
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
}

/* NEW: Styles for the AI Research Terminal Wrapper */
.ai-terminal-wrapper {
  position: fixed;
  inset: 0;
  background-color: black;
  z-index: 1000; /* Ensure it's on top of everything */
  font-family: 'Roboto Mono', 'Space Mono', 'Courier New', monospace;
  color: #CCCCCC; /* Light grey text */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Prevent scrollbars from the wrapper itself */
}

.ai-terminal-wrapper iframe {
  width: 100%;
  flex-grow: 1; /* Allow iframe to take up available space */
  border: none;
  background-color: transparent; /* Let the iframe's own background show through */
}

.ai-terminal-wrapper .terminal-footer {
  flex-shrink: 0; /* Prevent footer from shrinking */
  padding: 8px 10px;
  background-color: #000;
  border-top: 1px solid #333; /* A subtle separator */
  display: flex;
  align-items: center;
  font-size: 1em;
  line-height: 1.5;
}

.ai-terminal-wrapper .terminal-footer .prompt {
  color: #AAAAAA; /* Slightly darker grey for prompt */
  margin-right: 5px;
  user-select: none;
}

.ai-terminal-wrapper .terminal-footer .terminal-input {
  flex-grow: 1;
  background: none;
  border: none;
  color: #CCCCCC; /* Light grey for input text */
  font-family: inherit;
  font-size: inherit;
  outline: none; /* Remove focus outline */
  caret-color: #CCCCCC; /* Make caret visible */
  padding: 0;
}
.ai-terminal-wrapper .terminal-footer .terminal-input::selection {
  background-color: #008080; /* Win95 selection color */
  color: #FFFFFF;
}

/* GIL Archive Full-Screen Wrapper */
.gil-archive-wrapper {
  position: fixed;
  inset: 0;
  background-color: #000;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  visibility: hidden;
}

.gil-archive-wrapper.active {
  visibility: visible;
  pointer-events: auto;
}

.gil-archive-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Hide desktop and taskbar when terminal wrapper is active */
body.ai-terminal-active #desktop,
body.ai-terminal-active #taskbar,
body.ai-terminal-active #start-menu,
body.ai-terminal-active #mascot-gif,
body.ai-terminal-active #speech-bubble {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Ensure existing windows don't interfere */
body.ai-terminal-active .window {
  display: none;
}

/* NEW: About Me UI Styles */
.about-me-container {
  display: flex;
  height: 100%;
  padding: 8px; /* Inner padding for the entire about me window content */
  background-color: var(--win95-face);
  overflow: hidden; /* Hide overflow if content is larger than window */
}

.equipment-ui {
  flex-shrink: 0; /* Prevent equipment UI from shrinking */
  width: 240px; /* Fixed width for the equipment panel */
  background-image: url('icons/about_me_ui_bg.png'); /* Thematic background */
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  border: 2px solid;
  border-top-color: var(--win95-dark); /* Recessed border for the panel */
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* Adjusted gap between sections */
  margin-right: 10px; /* Space between UI and text content */
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.5); /* Subtle inner shadow */
}

/* UI Header */
.ui-header {
  width: 100%;
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap if space is tight */
  justify-content: center;
  align-items: center;
  gap: 5px 10px; /* Vertical and horizontal gap */
  margin-bottom: 5px; /* Adjusted margin-bottom */
  border: 1px solid var(--win95-dark);
  padding: 5px;
  background-color: rgba(0,0,0,0.4); /* Dark translucent background for bars */
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5), inset -1px -1px 0 rgba(255,255,255,0.1); /* Recessed look */
  color: var(--win95-light);
  font-size: 14px;
  flex-shrink: 0;
}

.hp-mp-label {
  font-weight: normal; /* Removed bold */
  color: var(--win95-light);
  text-shadow: none; /* Removed text-shadow */
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer; /* NEW: Add pointer cursor to label */
}

/* HP and MP Bar Containers */
.hp-bar-container, .mp-bar-container {
  flex-grow: 1; /* Allow bars to take available space */
  height: 12px;
  background-color: #333; /* Background for empty bar */
  border: 1px solid var(--win95-dark); /* Current border */
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5), inset -1px -1px 0 rgba(255,255,255,0.1); /* Recessed look */
  overflow: hidden;
  min-width: 60px; /* Minimum width to prevent collapsing */
  cursor: pointer; /* NEW: Add pointer cursor */
  transition: background-color 0.1s ease-out, box-shadow 0.1s ease-out; /* NEW: Add transition for feedback */
}

.hp-bar-fill {
  height: 100%;
  width: 85%; /* Example fill level */
  background-color: #00A800; /* Green for HP */
  transition: width 0.5s ease-out;
  border-right: 1px solid #005000;
}

.mp-bar-fill {
  height: 100%;
  width: 70%; /* Example fill level */
  background-color: #0000FF; /* Blue for MP */
  transition: width 0.5s ease-out;
  border-right: 1px solid #000080;
}

/* NEW: Hover and active states for HP/MP bars */
.hp-bar-container:hover, .mp-bar-container:hover {
  background-color: #222; /* Slightly darker background on hover */
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.7), inset -1px -1px 0 rgba(255,255,255,0.05); /* More pronounced inset shadow */
}

.hp-bar-container.active, .mp-bar-container.active {
  background-color: #111; /* Even darker on active/selected */
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.8), inset -1px -1px 0 rgba(255,255,255,0.02); /* Deeply inset */
}

/* NEW: Overview Button Container & Style */
.overview-button-container {
    width: 100%;
    margin-top: 10px; /* Space after talent slots */
    flex-shrink: 0;
}

.overview-btn {
    width: 100%;
    padding: 6px 10px;
    background-color: var(--win95-face); /* Win95 grey theme */
    border: 2px solid;
    border-top-color: var(--win95-light);
    border-left-color: var(--win95-light);
    border-right-color: var(--win95-dark);
    border-bottom-color: var(--win95-dark);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    cursor: pointer;
    font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
    font-size: 16px; /* Smaller, consistent with other buttons */
    color: var(--text); /* Black text */
    text-align: center;
    user-select: none;
    transition: all 0.1s ease-out;
}

.overview-btn:hover {
    background-color: var(--win95-face); /* Stays same or slightly darker for hover */
    border-top-color: var(--win95-dark);
    border-left-color: var(--win95-dark);
    border-right-color: var(--win95-light);
    border-bottom-color: var(--win95-light);
    box-shadow: none; /* Pressed effect */
    color: var(--text); /* Ensure text stays black */
}

.overview-btn.active {
    background-color: var(--win95-face); /* Stays same */
    border-top-color: var(--win95-dark);
    border-left-color: var(--win95-dark);
    border-right-color: var(--win95-light);
    border-bottom-color: var(--win95-light);
    box-shadow: none; /* Pressed effect */
    color: var(--text); /* Ensure text stays black */
}

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(2, 64px); /* 2 columns for 32x32 icons with padding */
  grid-template-rows: repeat(2, 64px);
  gap: 15px; /* Space between slots */
  flex-grow: 1; /* Allow slots to take some vertical space */
  place-content: center; /* Center the grid of slots */
  margin-bottom: 15px;
}

.equipment-slots .slot {
  width: 64px;
  height: 64px;
  background-color: rgba(0,0,0,0.4); /* Dark translucent background for empty slots */
  border: 2px solid;
  border-top-color: var(--win95-light); /* Raised border for slots */
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  cursor: pointer;
  background-size: 32px 32px; /* Set icon size */
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: all 0.1s ease-out;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.equipment-slots .slot:hover {
  background-color: rgba(0,0,0,0.6);
  border-top-color: var(--win95-dark); /* Invert border on hover/active */
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5); /* Recessed inner shadow */
}
.equipment-slots .slot.active {
  background-color: rgba(0,0,0,0.7);
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5);
}

/* Specific icons for each slot */
.head-slot { background-image: url('icons/helmet_icon.png'); }
.torso-slot { background-image: url('icons/chest_icon.png'); }
.hands-slot { background-image: url('icons/gloves_icon.png'); }
.legs-slot { background-image: url('icons/boots_icon.png'); }

.talent-slots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: auto; /* Push to bottom */
  padding-top: 10px;
  border-top: 1px solid var(--win95-dark);
  flex-shrink: 0;
  margin-bottom: 10px; /* Space between talents and overview button */
}

.talent-slot {
  width: 32px;
  height: 32px;
  background-color: rgba(0,0,0,0.4);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  cursor: pointer;
  background-size: 16px 16px; /* Adjusted icon size */
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: all 0.1s ease-out;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.talent-slot:hover {
  background-color: rgba(0,0,0,0.6);
  border-top-color: var(--win95-dark); /* Invert border on hover/active */
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5); /* Recessed inner shadow */
}
.talent-slot.active {
  background-color: rgba(0,0,0,0.7);
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5);
}

/* Specific icons for talent slots */
.talent-slot[data-slot="talent1"] { background-image: url('icons/talent_icon_debug.png'); }
.talent-slot[data-slot="talent2"] { background-image: url('icons/talent_icon_pixel.png'); }
.talent-slot[data-slot="talent3"] { background-image: url('icons/talent_icon_coffee.png'); }

.about-me-content {
  flex-grow: 1; /* Allow content to fill remaining space */
  padding: 8px;
  background-color: var(--win95-face);
  border: 2px solid; /* Recessed inner border for content area */
  border-top-color: var(--win95-dark);
  border-left-color: var(--win95-dark);
  border-right-color: var(--win95-light);
  border-bottom-color: var(--win95-light);
  overflow-y: auto; /* Allow scrolling for text content */
}

.about-me-content .content-title {
  font-size: 20px; /* Reduced font size */
  font-weight: normal; /* Removed bold */
  color: var(--win95-title-active-start);
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--win95-dark);
  text-shadow: none; /* Removed white shadow */
}

.about-me-content .content-text {
  font-size: 16px; /* Reduced font size */
  line-height: 1.6; /* Increased line-height from 1.5 to 1.6 for better readability */
  color: var(--text);
}

.about-me-content .highlight-text {
  font-size: 18px; /* Reduced font size */
  color: var(--win95-title-active-start);
}

.about-me-content .subdued-text {
    font-size: 14px; /* Reduced font size */
    color: var(--win95-dark);
}

.about-me-content ul {
    list-style: none; /* Remove default list style */
    padding-left: 15px; /* Indent list items */
    margin-top: 10px;
}

.about-me-content li {
    position: relative;
    margin-bottom: 5px;
    padding-left: 15px; 
}

.about-me-content li::before {
    content: '▶'; 
    position: absolute;
    left: 0;
    color: var(--win95-title-active-start); 
}

.about-me-content .placeholder-text {
  color: var(--win95-dark);
  font-style: normal; 
  font-size: 14px;
}

/* NEW: Loading Screen Styles */
#loading-screen {
  position: fixed;
  inset: 0;
  background-color: var(--desktop-bg); /* Use desktop teal color */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'VT323', 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Noto Sans', system-ui, sans-serif;
  user-select: none;
}

.loading-box {
  width: 400px;
  background-color: var(--win95-face);
  border: 2px solid;
  border-top-color: var(--win95-light);
  border-left-color: var(--win95-light);
  border-right-color: var(--win95-dark);
  border-bottom-color: var(--win95-dark);
  box-shadow: 2px 2px 0 #000;
  padding: 2px;
}

.loading-header {
  background: var(--win95-title-inactive); /* Inactive title bar color */
  color: var(--win95-light);
  padding: 2px 4px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
}

.loading-content {
  padding: 20px;
  text-align: center;
}

.loading-content p {
  margin: 0 0 10px 0;
  color: var(--text);
}

#loading-file {
  font-size: 14px;
  height: 20px; /* Reserve space to prevent layout shift */
  color: var(--win95-dark);
}

.progress-bar-container {
  height: 24px;
  border: 2px inset var(--win95-dark);
  padding: 2px;
  margin-bottom: 10px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--win95-title-active-start);
  background-image: linear-gradient(
    90deg, 
    var(--win95-title-active-start) 50%, 
    var(--win95-title-active-end) 50%
  );
  background-size: 8px 100%; /* Classic blocky look */
  transition: width 0.1s linear;
}