/* Easter Egg #22: CSS custom property with secret message */
:root {
  --dontcry: "You found the CSS secret. Remember: tears are just the rain of the soul. dontcry.";
  --desktop-bg: #008080;
  --bsod-blue: #0000AA;
  --shutdown-black: #000000;
  --shutdown-orange: #FF8800;
}

/* ==================== RESET & BASE ==================== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Pixelated MS Sans Serif', 'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* ==================== FULLSCREEN LAYERS ==================== */
.fullscreen-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==================== BIOS SCREEN ==================== */
#bios-screen {
  background: #000;
  color: #AAA;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 20px;
  z-index: 10003;
  white-space: pre-wrap;
}

#bios-text {
  max-width: 80ch;
}

#bios-skip {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #666;
  font-size: 12px;
  animation: blink-text 1s step-end infinite;
}

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

/* ==================== LOADING SCREEN ==================== */
#loading-screen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10003;
}

#loading-content {
  text-align: center;
}

#win2k-logo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  transform: rotate(-10deg);
}

.logo-flag {
  border-radius: 2px;
}
.flag-red { background: #FF0000; }
.flag-green { background: #00FF00; }
.flag-blue { background: #0000FF; }
.flag-yellow { background: #FFFF00; }

#loading-text {
  color: #fff;
  font-size: 28px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.logo-00 {
  font-style: italic;
  color: #ccc;
}

#loading-bar-container {
  width: 200px;
  height: 20px;
  margin: 0 auto;
  background: #000;
  border: 1px solid #444;
  padding: 2px;
  display: flex;
  gap: 2px;
}

.loading-segment {
  flex: 1;
  background: #444;
  transition: background 0.3s;
}

.loading-segment.active {
  background: #0000AA;
}

/* ==================== DESKTOP ==================== */
#desktop {
  background: var(--desktop-bg);
  z-index: 1;
}

#desktop-watermark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 32px);
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    rgba(255,255,255,0.5) 100px,
    rgba(255,255,255,0.5) 101px
  );
  /* We'll add text pattern via JS */
}

#desktop-watermark::after {
  content: "dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry dontcry";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  font-size: 24px;
  line-height: 2;
  word-spacing: 40px;
  color: rgba(255, 255, 255, 0.5);
  transform: rotate(-30deg);
  transform-origin: center center;
  pointer-events: none;
}

/* Easter egg #14 */
#desktop-hidden-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 120px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.04);
  z-index: 0;
  pointer-events: none;
  letter-spacing: 20px;
  white-space: nowrap;
}

/* ==================== DESKTOP ICONS ==================== */
#desktop-icons {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 4px;
  max-height: calc(100vh - 52px);
  z-index: 5;
  align-content: flex-start;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 75px;
  padding: 4px;
  cursor: default;
  text-align: center;
  border: 1px solid transparent;
}

.desktop-icon:hover {
  background: rgba(0, 0, 128, 0.15);
}

.desktop-icon.selected {
  background: rgba(0, 0, 128, 0.3);
  border: 1px dotted #fff;
}

.desktop-icon .icon-image {
  font-size: 32px;
  margin-bottom: 2px;
  line-height: 1;
  pointer-events: none;
}

.desktop-icon .icon-label {
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  word-wrap: break-word;
  max-width: 70px;
  pointer-events: none;
}

/* ==================== WINDOWS ==================== */
#windows-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 32px);
  pointer-events: none;
  z-index: 10;
}

.app-window {
  position: absolute;
  pointer-events: auto;
  min-width: 200px;
  min-height: 120px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.app-window .title-bar {
  cursor: default;
}

.app-window .window-body {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.app-window.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100vh - 32px) !important;
}

.app-window.minimized {
  display: none !important;
}

.app-window.focused .title-bar {
  background: linear-gradient(90deg, #000080, #1084d0);
}

.app-window:not(.focused) .title-bar {
  background: linear-gradient(90deg, #808080, #b0b0b0);
}

/* ==================== TASKBAR ==================== */
#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  z-index: 9000;
  gap: 2px;
}

.start-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 6px;
  height: 24px;
  min-width: 70px;
}

.start-btn img {
  image-rendering: pixelated;
}

.start-btn.active {
  border-style: inset;
  padding: 3px 5px 1px 7px;
}

#taskbar-programs {
  flex: 1;
  display: flex;
  gap: 2px;
  overflow: hidden;
  padding: 0 2px;
}

.taskbar-program {
  height: 24px;
  font-size: 11px;
  padding: 2px 8px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 1;
  min-width: 40px;
}

.taskbar-program.active {
  border-style: inset;
  font-weight: bold;
}

#system-tray {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  height: 24px;
  border-left: 1px solid #808080;
  border-top: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.tray-icon {
  background: none;
  border: none;
  font-size: 14px;
  padding: 0 2px;
  cursor: default;
  min-width: 0;
}

#taskbar-clock {
  font-size: 11px;
  padding: 0 4px;
  min-width: 55px;
  text-align: center;
}

/* ==================== START MENU ==================== */
#start-menu {
  position: fixed;
  bottom: 32px;
  left: 0;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  z-index: 9100;
  display: flex;
  min-width: 180px;
  box-shadow: 2px -2px 5px rgba(0,0,0,0.3);
}

#start-menu-banner {
  background: linear-gradient(to top, #000080, #1084d0);
  width: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
}

#start-menu-banner span {
  color: #c0c0c0;
  font-size: 16px;
  font-weight: bold;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  letter-spacing: 2px;
  white-space: nowrap;
}

#start-menu-banner b {
  color: #fff;
}

#start-menu-items {
  list-style: none;
  margin: 2px 0;
  padding: 0;
  flex: 1;
}

#start-menu-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 24px 6px 8px;
  font-size: 12px;
  cursor: default;
  position: relative;
}

#start-menu-items li:hover {
  background: #000080;
  color: #fff;
}

#start-menu-items li.separator {
  height: 1px;
  padding: 0;
  margin: 2px 4px;
  background: #808080;
  border-bottom: 1px solid #fff;
}

#start-menu-items li.separator:hover {
  background: #808080;
}

.menu-icon {
  width: 16px;
  text-align: center;
  font-size: 14px;
}

.menu-arrow {
  position: absolute;
  right: 8px;
  font-size: 8px;
}

.menu-label {
  flex: 1;
}

/* Submenu */
.submenu {
  position: fixed;
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  z-index: 9101;
  min-width: 160px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.submenu ul {
  list-style: none;
  margin: 2px 0;
  padding: 0;
}

.submenu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: default;
}

.submenu li:hover {
  background: #000080;
  color: #fff;
}

/* ==================== RUN DIALOG ==================== */
#run-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9200;
}

#run-dialog .window {
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}

#run-input {
  width: 100%;
}

/* ==================== CONTEXT MENU ==================== */
#context-menu {
  position: fixed;
  z-index: 9500;
  min-width: 180px;
  padding: 0;
}

.context-menu-list {
  list-style: none;
  margin: 2px 0;
  padding: 0;
}

.context-menu-list li {
  padding: 4px 24px 4px 12px;
  font-size: 12px;
  cursor: default;
}

.context-menu-list li:hover {
  background: #000080;
  color: #fff;
}

.context-menu-list li.separator {
  height: 1px;
  padding: 0;
  margin: 2px 4px;
  background: #808080;
  border-bottom: 1px solid #fff;
}

.context-menu-list li.separator:hover {
  background: #808080;
}

.dontcry-option {
  font-style: italic;
}

/* ==================== APP-SPECIFIC: NOTEPAD ==================== */
.notepad-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notepad-menu {
  display: flex;
  gap: 0;
  padding: 2px 0;
  border-bottom: 1px solid #808080;
  background: #c0c0c0;
}

.notepad-menu button {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 12px;
  cursor: default;
  min-width: 0;
}

.notepad-menu button:hover {
  background: #000080;
  color: #fff;
}

.notepad-textarea {
  flex: 1;
  border: none;
  resize: none;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 4px;
  outline: none;
  background: #fff;
  width: 100%;
}

/* ==================== APP-SPECIFIC: INTERNET EXPLORER ==================== */
.ie-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ie-toolbar {
  background: #c0c0c0;
  padding: 2px;
  border-bottom: 1px solid #808080;
  display: flex;
  gap: 2px;
}

.ie-toolbar button {
  font-size: 11px;
  padding: 2px 6px;
  min-width: 0;
}

.ie-address-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
}

.ie-address-bar label {
  font-size: 11px;
  font-weight: bold;
}

.ie-address-bar input {
  flex: 1;
  font-size: 11px;
}

.ie-content {
  flex: 1;
  background: #fff;
  overflow: auto;
  padding: 0;
}

.geocities-page {
  font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
  background: #000033;
  color: #00FF00;
  padding: 20px;
  min-height: 100%;
}

.geocities-page h1 {
  text-align: center;
  color: #FFFF00;
  font-size: 24px;
  text-shadow: 2px 2px #FF0000;
}

.geocities-page .marquee-text {
  color: #FF00FF;
  font-size: 14px;
  white-space: nowrap;
  animation: marquee-scroll 10s linear infinite;
}

@keyframes marquee-scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.geocities-page .hit-counter {
  text-align: center;
  margin: 16px 0;
  font-family: 'Courier New', monospace;
  color: #00FFFF;
}

.geocities-page .hit-counter .counter-digits {
  display: inline-flex;
  gap: 2px;
  background: #000;
  padding: 4px 8px;
  border: 2px inset #808080;
}

.geocities-page .hit-counter .counter-digit {
  background: #111;
  color: #0f0;
  padding: 2px 6px;
  font-size: 18px;
  border: 1px solid #333;
}

.geocities-page hr {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF);
  margin: 16px 0;
}

.geocities-page .under-construction {
  text-align: center;
  margin: 16px 0;
}

.geocities-page .guestbook {
  background: #000066;
  border: 2px inset #808080;
  padding: 12px;
  margin: 16px 0;
}

.geocities-page .guestbook h3 {
  color: #FFFF00;
  margin: 0 0 8px;
}

.geocities-page .guestbook-entry {
  border-bottom: 1px solid #003366;
  padding: 8px 0;
  color: #CCCCCC;
  font-size: 12px;
}

.geocities-page .guestbook-entry .gb-name {
  color: #FF6600;
  font-weight: bold;
}

.geocities-page .guestbook-entry .gb-date {
  color: #666;
  font-size: 10px;
}

.geocities-page a {
  color: #FFFF00;
}

.geocities-page .blink {
  animation: blink-anim 1s step-end infinite;
}

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

.geocities-page .webring {
  text-align: center;
  margin-top: 20px;
  padding: 8px;
  border: 1px dashed #00FF00;
}

/* ==================== APP-SPECIFIC: MY COMPUTER ==================== */
.mycomputer-body {
  height: 100%;
  overflow: auto;
  padding: 8px;
}

.tree-view {
  font-size: 12px;
}

.tree-item {
  padding: 1px 0;
  cursor: default;
}

.tree-item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 4px;
}

.tree-item-header:hover {
  background: #000080;
  color: #fff;
}

.tree-toggle {
  width: 12px;
  font-size: 10px;
  cursor: pointer;
  text-align: center;
  flex-shrink: 0;
}

.tree-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.tree-label {
  white-space: nowrap;
}

.tree-children {
  padding-left: 20px;
  border-left: 1px dotted #808080;
  margin-left: 6px;
}

.tree-children.collapsed {
  display: none;
}

/* ==================== APP-SPECIFIC: RECYCLE BIN ==================== */
.recyclebin-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.recyclebin-toolbar {
  padding: 2px 4px;
  font-size: 11px;
  border-bottom: 1px solid #808080;
  color: #808080;
}

.recyclebin-list {
  flex: 1;
  overflow: auto;
}

.recyclebin-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.recyclebin-list th {
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  padding: 2px 8px;
  text-align: left;
  font-weight: normal;
  cursor: default;
  position: sticky;
  top: 0;
}

.recyclebin-list td {
  padding: 1px 8px;
  border-bottom: none;
  white-space: nowrap;
}

.recyclebin-list tr:hover td {
  background: #000080;
  color: #fff;
}

.recyclebin-list .file-icon {
  font-size: 14px;
  margin-right: 4px;
}

/* ==================== APP-SPECIFIC: PAINT ==================== */
.paint-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.paint-menu {
  display: flex;
  gap: 0;
  padding: 2px 0;
  border-bottom: 1px solid #808080;
  background: #c0c0c0;
}

.paint-menu button {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 12px;
  cursor: default;
  min-width: 0;
}

.paint-menu button:hover {
  background: #000080;
  color: #fff;
}

.paint-workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.paint-tools {
  width: 36px;
  background: #c0c0c0;
  border-right: 1px solid #808080;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
}

.paint-tool {
  width: 28px;
  height: 28px;
  font-size: 14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  cursor: default;
}

.paint-tool.active {
  border-style: inset;
}

.paint-canvas-area {
  flex: 1;
  overflow: auto;
  background: #808080;
  padding: 4px;
}

.paint-canvas-area canvas {
  background: #fff;
  cursor: crosshair;
  display: block;
}

.paint-colors {
  height: 32px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 1px;
}

.paint-color {
  width: 16px;
  height: 16px;
  border: 1px solid #808080;
  cursor: default;
  min-width: 0;
  padding: 0;
}

.paint-color.active {
  border: 2px solid #000;
}

.paint-current-colors {
  width: 30px;
  height: 26px;
  position: relative;
  margin-right: 4px;
}

.paint-fg-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #808080;
  background: #000;
}

.paint-bg-color {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #808080;
  background: #fff;
}

/* ==================== APP-SPECIFIC: MINESWEEPER ==================== */
.minesweeper-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #c0c0c0;
  padding: 8px;
  height: 100%;
}

.minesweeper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 270px;
  border: 2px inset #c0c0c0;
  padding: 4px 8px;
  margin-bottom: 8px;
  background: #c0c0c0;
}

.mine-counter, .mine-timer {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: bold;
  color: #FF0000;
  background: #000;
  padding: 2px 6px;
  min-width: 50px;
  text-align: center;
  border: 1px inset #808080;
}

.mine-face {
  font-size: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.mine-grid {
  display: grid;
  grid-template-columns: repeat(9, 26px);
  grid-template-rows: repeat(9, 26px);
  gap: 0;
  border: 2px inset #c0c0c0;
}

.mine-cell {
  width: 26px;
  height: 26px;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  padding: 0;
  min-width: 0;
  border: 2px outset #c0c0c0;
  background: #c0c0c0;
}

.mine-cell.revealed {
  border: 1px solid #808080;
  background: #c0c0c0;
}

.mine-cell.mine-exploded {
  background: #FF0000;
}

.mine-cell .num-1 { color: #0000FF; }
.mine-cell .num-2 { color: #008000; }
.mine-cell .num-3 { color: #FF0000; }
.mine-cell .num-4 { color: #000080; }
.mine-cell .num-5 { color: #800000; }
.mine-cell .num-6 { color: #008080; }
.mine-cell .num-7 { color: #000000; }
.mine-cell .num-8 { color: #808080; }

/* ==================== APP-SPECIFIC: MEDIA PLAYER ==================== */
.mediaplayer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
}

.mediaplayer-menu {
  display: flex;
  gap: 0;
  padding: 2px 0;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
}

.mediaplayer-menu button {
  background: none;
  border: none;
  padding: 2px 8px;
  font-size: 12px;
  cursor: default;
  min-width: 0;
}

.mediaplayer-menu button:hover {
  background: #000080;
  color: #fff;
}

.mediaplayer-vis {
  flex: 1;
  min-height: 80px;
}

.mediaplayer-vis canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.mediaplayer-info {
  color: #00FF00;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  padding: 4px 8px;
  background: #1a1a1a;
  border-top: 1px solid #333;
}

.mediaplayer-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #c0c0c0;
  border-top: 1px solid #808080;
}

.mediaplayer-controls button {
  font-size: 14px;
  padding: 2px 8px;
  min-width: 0;
  cursor: default;
}

.mediaplayer-progress {
  flex: 1;
  height: 8px;
  border: 1px inset #c0c0c0;
  background: #fff;
  position: relative;
}

.mediaplayer-progress-fill {
  height: 100%;
  background: #000080;
  width: 0%;
  transition: width 0.3s;
}

/* ==================== APP-SPECIFIC: WELCOME ==================== */
.welcome-body {
  padding: 16px;
  text-align: center;
}

.welcome-body h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.welcome-body p {
  font-size: 12px;
  margin: 8px 0;
  line-height: 1.5;
}

.welcome-logo {
  font-size: 48px;
  margin: 8px 0;
}

.welcome-body button {
  margin-top: 12px;
  min-width: 80px;
}

/* ==================== CLIPPY ==================== */
#clippy {
  position: fixed;
  bottom: 48px;
  right: 16px;
  z-index: 9200;
  animation: clippy-bounce 0.5s ease-out;
}

@keyframes clippy-bounce {
  0% { transform: translateY(100px); opacity: 0; }
  60% { transform: translateY(-10px); }
  100% { transform: translateY(0); opacity: 1; }
}

.clippy-body {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.clippy-image {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

.clippy-bubble {
  background: #FFFFCC;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  max-width: 200px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  position: relative;
}

.clippy-bubble::after {
  content: '';
  position: absolute;
  bottom: 16px;
  left: -10px;
  border: 5px solid transparent;
  border-right-color: #000;
}

.clippy-bubble p {
  margin: 0 0 8px;
}

.clippy-actions {
  display: flex;
  gap: 4px;
}

.clippy-actions button {
  font-size: 11px;
  padding: 2px 8px;
}

.clippy-close {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #c0c0c0;
  border: 1px outset #c0c0c0;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* ==================== SCREENSAVER ==================== */
#screensaver {
  background: #000;
  z-index: 10000;
  cursor: none;
}

#screensaver-text {
  position: absolute;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 10px currentColor;
}

/* ==================== BSOD ==================== */
#bsod {
  background: var(--bsod-blue);
  color: #fff;
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 16px;
  line-height: 1.6;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}

#bsod-content {
  max-width: 80ch;
  text-align: center;
}

#bsod-header {
  background: #aaa;
  color: var(--bsod-blue);
  display: inline-block;
  padding: 0 8px;
  font-weight: bold;
}

#bsod-cursor {
  animation: blink-text 1s step-end infinite;
}

.bsod-hex {
  font-size: 11px;
  color: #aaa;
  margin-top: 20px;
  text-align: left;
  line-height: 1.4;
}

/* ==================== SHUTDOWN ==================== */
#shutdown-screen {
  background: var(--shutdown-black);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
}

#shutdown-content {
  text-align: center;
}

#shutdown-text {
  color: var(--shutdown-orange);
  font-size: 28px;
  font-family: 'Times New Roman', serif;
  margin: 0;
}

#shutdown-dontcry {
  color: var(--shutdown-orange);
  font-size: 36px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  margin: 8px 0 0;
}

/* ==================== CONFETTI ==================== */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10003;
}

/* ==================== ERROR DIALOG ==================== */
.error-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9300;
  min-width: 300px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}

/* ==================== KONAMI RAINBOW ==================== */
.rainbow-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rainbow-text {
  font-size: 80px;
  font-weight: bold;
  animation: rainbow-color 2s linear infinite, rainbow-scale 0.5s ease-out;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

@keyframes rainbow-color {
  0% { color: #FF0000; }
  16% { color: #FF8800; }
  33% { color: #FFFF00; }
  50% { color: #00FF00; }
  66% { color: #0088FF; }
  83% { color: #8800FF; }
  100% { color: #FF0000; }
}

@keyframes rainbow-scale {
  0% { transform: scale(0); }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ==================== INVERT EFFECT (easter egg #13) ==================== */
.color-inverted {
  filter: invert(1);
  transition: filter 0.3s;
}

/* ==================== MOBILE WARNING ==================== */
@media (max-width: 640px) {
  .desktop-icon .icon-label {
    font-size: 10px;
  }

  #desktop-icons {
    gap: 2px;
  }

  .desktop-icon {
    width: 65px;
  }

  #screensaver-text {
    font-size: 28px;
  }
}