@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #e0c3fc 0%, #c9b8e6 25%, #b8d4e8 50%, #ffe6f0 75%, #ffd6e8 100%);
  font-family: 'VT323', monospace;
  overflow: hidden;
  /* Pixelated retro cursor - clean arrow */
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="22" viewBox="0 0 16 22" shape-rendering="crispEdges"><path fill="%23000" d="M0 0h1v1H0zM0 1h1v1H0zM1 1h1v1H1zM0 2h1v1H0zM2 2h1v1H2zM0 3h1v1H0zM3 3h1v1H3zM0 4h1v1H0zM4 4h1v1H4zM0 5h1v1H0zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7zM0 8h1v1H0zM8 8h1v1H8zM0 9h1v1H0zM9 9h1v1H9zM0 10h1v1H0zM10 10h1v1h-1zM0 11h1v1H0zM11 11h1v1h-1zM0 12h1v1H0zM5 12h1v1H5zM12 12h1v1h-1zM0 13h1v1H0zM4 13h1v1H4zM6 13h1v1H6zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM7 14h1v1H7zM0 15h1v1H0zM2 15h1v1H2zM7 15h1v1H7zM8 15h1v1H8zM0 16h1v1H0zM1 16h1v1H1zM8 16h1v1H8zM9 16h1v1H9zM9 17h1v1H9zM9 18h1v1H9z"/><path fill="%23ff1493" d="M1 2h1v1H1zM1 3h1v1H1zM2 3h1v1H2zM1 4h1v1H1zM2 4h1v1H2zM3 4h1v1H3zM1 5h1v1H1zM2 5h1v1H2zM3 5h1v1H3zM4 5h1v1H4zM1 6h1v1H1zM2 6h1v1H2zM3 6h1v1H3zM4 6h1v1H4zM5 6h1v1H5zM1 7h1v1H1zM2 7h1v1H2zM3 7h1v1H3zM4 7h1v1H4zM5 7h1v1H5zM6 7h1v1H6zM1 8h1v1H1zM2 8h1v1H2zM3 8h1v1H3zM4 8h1v1H4zM5 8h1v1H5zM6 8h1v1H6zM7 8h1v1H7zM1 9h1v1H1zM2 9h1v1H2zM3 9h1v1H3zM4 9h1v1H4zM5 9h1v1H5zM6 9h1v1H6zM7 9h1v1H7zM8 9h1v1H8zM1 10h1v1H1zM2 10h1v1H2zM3 10h1v1H3zM4 10h1v1H4zM5 10h1v1H5zM6 10h1v1H6zM7 10h1v1H7zM8 10h1v1H8zM9 10h1v1H9zM1 11h1v1H1zM2 11h1v1H2zM3 11h1v1H3zM4 11h1v1H4zM5 11h1v1H5zM6 11h1v1H6zM7 11h1v1H7zM8 11h1v1H8zM9 11h1v1H9zM10 11h1v1h-1zM1 12h1v1H1zM2 12h1v1H2zM3 12h1v1H3zM4 12h1v1H4zM6 12h1v1H6zM7 12h1v1H7zM8 12h1v1H8zM9 12h1v1H9zM10 12h1v1h-1zM11 12h1v1h-1zM1 13h1v1H1zM2 13h1v1H2zM3 13h1v1H3zM1 14h1v1H1zM2 14h1v1H2zM1 15h1v1H1z"/><path fill="%23ffd6e8" d="M1 3h1v1H1zM1 4h1v1H1zM2 4h1v1H2zM1 5h1v1H1zM2 5h1v1H2zM1 6h1v1H1zM2 6h1v1H2zM3 6h1v1H3zM1 7h1v1H1zM2 7h1v1H2zM3 7h1v1H3zM1 8h1v1H1zM2 8h1v1H2zM3 8h1v1H3zM4 8h1v1H4zM1 9h1v1H1zM2 9h1v1H2zM3 9h1v1H3zM4 9h1v1H4zM1 10h1v1H1zM2 10h1v1H2zM3 10h1v1H3zM4 10h1v1H4zM5 10h1v1H5z"/></svg>') 0 0, auto;
}

/* Cursor sparkle trail */
.cursor-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  animation: sparkle-fade 1s ease-out forwards;
  text-shadow: 0 0 5px currentColor;
}

@keyframes sparkle-fade {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-30px) scale(0) rotate(180deg);
  }
}

/* Scanlines overlay */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 1000;
}

/* Desktop container */
.desktop {
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ===== TITLE BAR (top) ===== */
.title-bar {
  background: linear-gradient(90deg, #ff1493 0%, #ff69b4 50%, #ff1493 100%);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid #c9a0dc;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.title-bar-text {
  color: #fff;
  font-size: 1.2rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 0.1em;
}

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

.control-btn {
  width: 20px;
  height: 20px;
  background: linear-gradient(180deg, #ffd6e8 0%, #ffb3d9 100%);
  border: 2px outset #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #ff1493;
  cursor: inherit;
}

.control-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #ffd6e8 100%);
}

/* ===== DESKTOP AREA ===== */
.desktop-area {
  flex: 1;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* ===== DESKTOP ICONS ===== */
.icons-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.desktop-icon {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: inherit;
  padding: 10px;
  user-select: none;
}

.desktop-icon:nth-child(1) { left: 40px; top: 40px; }
.desktop-icon:nth-child(2) { left: 40px; top: 160px; }
.desktop-icon:nth-child(3) { left: 40px; top: 280px; }
.desktop-icon:nth-child(4) { left: 40px; top: 400px; }

.desktop-icon.dragging {
  z-index: 100;
  opacity: 0.8;
}

.desktop-icon:hover {
  background: rgba(255, 20, 147, 0.2);
  outline: 1px dotted #ff1493;
}

.desktop-icon:hover .icon-label {
  background: #ff1493;
  color: #fff;
}

.icon-image {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #ffd6e8 0%, #c9a0dc 50%, #99d6ea 100%);
  border: 3px outset #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5),
    3px 3px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

.icon-image::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 8px;
  bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
}

.icon-graphic {
  font-size: 2rem;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

.icon-label {
  font-size: 1rem;
  color: #ff1493;
  text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

/* ===== FLOATING WINDOW ===== */
.floating-window {
  position: absolute;
  left: calc(50% - 50px);
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffd6e8;
  border: 3px outset #fff;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.8),
    6px 6px 0 rgba(0, 0, 0, 0.15);
  min-width: 280px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 10px)); }
}

.window-title-bar {
  background: linear-gradient(90deg, #c9a0dc 0%, #99d6ea 100%);
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #9b8aa6;
  cursor: move;
}

.draggable-window.dragging {
  z-index: 200;
  opacity: 0.9;
}

.window-title {
  color: #fff;
  font-size: 1rem;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  letter-spacing: 0.1em;
}

.window-minimize {
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, #ffd6e8 0%, #ffb3d9 100%);
  border: 2px outset #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff1493;
  cursor: inherit;
  line-height: 0.5;
  padding-bottom: 4px;
}

.window-minimize:hover {
  background: linear-gradient(180deg, #fff 0%, #ffd6e8 100%);
}

.window-minimize:active {
  border-style: inset;
}

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

.window-content p {
  color: #ff1493;
  font-size: 1.4rem;
  text-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
  margin-bottom: 5px;
  letter-spacing: 0.15em;
}

.window-deco {
  font-size: 1.5rem;
  margin-top: 15px;
  color: #c9a0dc;
  text-shadow: 0 0 10px #c9a0dc;
}

/* ===== NOW PLAYING WINDOW ===== */
.now-playing-window {
  right: 40px;
  left: auto;
  top: 40px;
  bottom: auto;
  transform: none;
  animation: none;
}

.now-playing-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px 35px;
}

.album-art {
  width: 150px;
  height: 150px;
  border: 3px inset #c9a0dc;
  background: #2d1b4e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.album-art:hover {
  border-color: #ff1493;
}

.album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.track-info {
  text-align: center;
  max-width: 280px;
  cursor: pointer;
}

.track-info:hover .track-name,
.track-info:hover .artist-name {
  text-decoration: underline;
}

.track-name {
  color: #ff1493;
  font-size: 1.5rem;
  text-shadow: 0 0 5px rgba(255, 20, 147, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
  margin-bottom: 5px;
}

.artist-name {
  color: #99d6ea;
  font-size: 1.2rem;
  text-shadow: 0 0 5px rgba(153, 214, 234, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.now-playing-buttons {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.np-button {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  padding: 6px 15px;
  background: linear-gradient(180deg, #ffd6e8 0%, #ffb3d9 100%);
  border: 2px outset #fff;
  color: #ff1493;
  cursor: inherit;
  letter-spacing: 0.05em;
  box-shadow:
    inset -1px -1px 0 rgba(0, 0, 0, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.np-button:hover {
  background: linear-gradient(180deg, #fff 0%, #ffd6e8 100%);
}

.np-button:active {
  border-style: inset;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.2),
    inset -1px -1px 0 rgba(255, 255, 255, 0.8);
}

.now-playing-status {
  font-size: 0.9rem;
  color: #9b8aa6;
  letter-spacing: 0.1em;
  margin-top: 5px;
}

.now-playing-status.is-playing {
  color: #98e8c1;
  text-shadow: 0 0 10px #98e8c1;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 10, 46, 0.8);
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-window {
  background: #ffd6e8;
  border: 3px outset #fff;
  box-shadow:
    inset -2px -2px 0 rgba(0, 0, 0, 0.2),
    inset 2px 2px 0 rgba(255, 255, 255, 0.8),
    8px 8px 0 rgba(0, 0, 0, 0.3);
  min-width: 280px;
  max-width: 90%;
  animation: modal-pop 0.2s ease-out;
}

@keyframes modal-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.modal-content {
  padding: 30px 40px;
  text-align: center;
}

.modal-icon {
  font-size: 3rem;
  color: #ff1493;
  text-shadow:
    0 0 10px #ff1493,
    0 0 20px #ff69b4;
  margin-bottom: 15px;
  animation: pulse 1.5s ease-in-out infinite;
}

.modal-content p {
  color: #ff1493;
  font-size: 1.4rem;
  text-shadow: 0 0 5px rgba(255, 20, 147, 0.5);
  margin-bottom: 20px;
  letter-spacing: 0.1em;
}

.modal-button {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  padding: 8px 30px;
  background: linear-gradient(180deg, #ffd6e8 0%, #ffb3d9 100%);
  border: 3px outset #fff;
  color: #ff1493;
  cursor: inherit;
  letter-spacing: 0.1em;
  box-shadow:
    inset -1px -1px 0 rgba(0, 0, 0, 0.2),
    inset 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.modal-button:hover {
  background: linear-gradient(180deg, #fff 0%, #ffd6e8 100%);
}

.modal-button:active {
  border-style: inset;
  box-shadow:
    inset 1px 1px 0 rgba(0, 0, 0, 0.2),
    inset -1px -1px 0 rgba(255, 255, 255, 0.8);
}

/* ===== SCREENSAVER ===== */
.screensaver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  cursor: none;
}

.screensaver.active {
  display: block;
}

#screensaver-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.screensaver-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bouncing-text {
  position: absolute;
  font-family: 'VT323', monospace;
  font-size: 4rem;
  color: #ff1493;
  text-shadow:
    0 0 10px #ff1493,
    0 0 20px #ff1493,
    0 0 40px #ff69b4,
    0 0 80px #ff69b4;
  white-space: nowrap;
  letter-spacing: 0.2em;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  /* Disable sparkle trail on mobile for performance */
  .cursor-sparkle {
    display: none;
  }

  /* Title bar */
  .title-bar {
    padding: 6px 10px;
  }

  .title-bar-text {
    font-size: 0.9rem;
    letter-spacing: 0.05em;
  }

  /* Desktop icons - grid layout for touch */
  .desktop-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  .icons-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px;
    width: 100%;
    height: auto;
  }

  .icon-image {
    width: 50px;
    height: 50px;
  }

  .icon-graphic {
    font-size: 1.5rem;
  }

  .icon-label {
    font-size: 0.75rem;
    word-break: break-word;
    text-align: center;
  }

  /* Floating windows - full width on mobile */
  .floating-window {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: 90%;
    min-width: auto;
    max-width: 350px;
    animation: none !important;
  }

  .floating-window:first-of-type {
    position: relative;
    margin: 20px auto;
  }

  /* Now playing window */
  .now-playing-window {
    position: relative !important;
    margin: 20px auto !important;
  }

  .now-playing-content {
    padding: 15px 20px;
  }

  .album-art {
    width: 100px;
    height: 100px;
  }

  .track-name {
    font-size: 1.2rem;
    max-width: 200px;
  }

  .artist-name {
    font-size: 1rem;
    max-width: 200px;
  }

  .now-playing-buttons {
    flex-direction: column;
    width: 100%;
  }

  .np-button {
    width: 100%;
    padding: 10px 15px;
  }

  /* Desktop area - scrollable on mobile */
  .desktop-area {
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Window content */
  .window-content {
    padding: 15px 20px;
  }

  .window-content p {
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }

  .window-deco {
    font-size: 1.2rem;
    margin-top: 10px;
  }

  /* Modal */
  .modal-window {
    width: 90%;
    max-width: 300px;
  }

  .modal-content {
    padding: 20px 25px;
  }

  .modal-content p {
    font-size: 1.2rem;
  }

  /* Screensaver */
  .bouncing-text {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }

  /* Minimized icons on mobile */
  .minimized-icon {
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
}

/* Extra small screens */
@media (max-width: 400px) {
  .icons-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .title-bar-text {
    font-size: 0.8rem;
  }

  .window-title {
    font-size: 0.85rem;
  }

  .album-art {
    width: 80px;
    height: 80px;
  }

  .track-name {
    font-size: 1rem;
  }

  .artist-name {
    font-size: 0.9rem;
  }
}