/* ============================================================
   DESKTOP-OS — desktop.css
   Wallpaper, icon grid, taskbar, Start button, mirror clock.
   Aesthetic: Windows 95/98 chrome + CRT green, unchanged.
   ============================================================ */

:root {
  --win-face:   #c0c0c0;
  --win-light:  #ffffff;
  --win-shadow: #666666;
  --win-dark:   #404040;
  --title-blue: #000080;
  --title-gray: #7f7f7f;
  --crt-green:  #00ff00;
  --clock-green:#008106;
  --taskbar-h:  36px;
}

/* ---------- Desktop ---------- */
.wpdos-desktop {
  position: relative;
  width: 100%;
  height: 100vh;   /* fallback for old browsers */
  height: 100dvh;  /* fixes mobile browser chrome cutting off the taskbar */
  background: url('https://jafarhejazi.com/wp-content/uploads/2025/05/98qaCGo-scaled.jpeg') center/cover no-repeat;
  overflow: hidden;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
}

/* ---------- Icon grid (unchanged look) ---------- */
.icons {
  position: absolute;
  top: 40px; left: 40px; right: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 16px;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--crt-green);
  font-size: 12px;
  background: none;
  border: none;       /* app icons are <button>s — strip default chrome */
  padding: 4px 2px;
  cursor: pointer;
  font-family: inherit;
}

.icon img {
  width: 48px; height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

.icon:focus-visible {
  outline: 1px dotted var(--crt-green);
  outline-offset: 2px;
}

/* ---------- Taskbar ---------- */
.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--taskbar-h);
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  box-shadow: 0 -1px 0 var(--win-shadow);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  z-index: 9000;
  box-sizing: border-box;
}

#startButton {
  height: 26px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-bottom: 2px solid var(--win-shadow);
  border-right: 2px solid var(--win-shadow);
  cursor: pointer;
  user-select: none;
}

#startButton:active {
  border-top-color: var(--win-shadow);
  border-left-color: var(--win-shadow);
  border-bottom-color: var(--win-light);
  border-right-color: var(--win-light);
}

#startButton:focus-visible,
.task-btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.task-area {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.task-btn {
  height: 26px;
  min-width: 90px;
  max-width: 160px;
  padding: 0 8px;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  color: #000;
  background: var(--win-face);
  border-top: 2px solid var(--win-light);
  border-left: 2px solid var(--win-light);
  border-bottom: 2px solid var(--win-shadow);
  border-right: 2px solid var(--win-shadow);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active (focused, not minimized) window = pressed-in button, Win95 style */
.task-btn.active {
  border-top-color: var(--win-shadow);
  border-left-color: var(--win-shadow);
  border-bottom-color: var(--win-light);
  border-right-color: var(--win-light);
  background: #dcdcdc;
  font-weight: bold;
}

/* ---------- Mirror clock ----------
   Sits above the taskbar. Hands rotate COUNTER-clockwise; the 3 and 9
   numerals are swapped so the dial reads the correct time as a mirror
   clock (see clock.js). */
#clock {
  position: absolute;
  right: 8px;
  bottom: calc(var(--taskbar-h) + 8px);
  width: 80px; height: 80px;
  background: var(--win-face);
  border: 2px outset #888;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 50;
}

.hand {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: bottom center;
  background: var(--clock-green);
}
.hand.hour   { width: 4px; height: 20px; margin-left: -2px;   margin-top: -20px; }
.hand.minute { width: 2px; height: 28px; margin-left: -1px;   margin-top: -28px; }
.hand.second {
  width: 1px; height: 32px; margin-left: -0.5px; margin-top: -32px;
  background: #ff0000;
  /* Mechanical tick: the hand snaps each second with a slight overshoot.
     clock.js keeps the angle cumulative so this never spins the long way. */
  transition: transform 0.15s cubic-bezier(0.4, 2.3, 0.6, 0.6);
}

.clock-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--clock-green);
  border-radius: 50%;
}

.mark {
  position: absolute;
  color: var(--clock-green);
  font-size: 14px;
  user-select: none;
}
.mark-top    { top: 4px;    left: 50%; transform: translateX(-50%); }
.mark-right  { right: 4px;  top: 50%;  transform: translateY(-50%); }
.mark-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.mark-left   { left: 4px;   top: 50%;  transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .hand.second { transition: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .icons { top: 24px; left: 16px; right: 16px; gap: 10px; }
  .task-btn { min-width: 64px; }
  #clock { width: 64px; height: 64px; }
  .hand.hour   { height: 15px; margin-top: -15px; }
  .hand.minute { height: 21px; margin-top: -21px; }
  .hand.second { height: 24px; margin-top: -24px; }
  .mark { font-size: 11px; }
}