/* ============================================
   ROOT VARS
   ============================================ */
:root {
  --taskbar-height: 36px;
  --start-icon-h: 28px;
  --tray-icon-h: 26px;

  --ui-font-size: 14px;   /* buttons, title bars, inputs */
  --body-font-size: 16px; /* paragraphs etc. */
}

/* Global box sizing */
* {
  box-sizing: border-box;
}

/* ============================================
   BASE + WALLPAPER
   ============================================ */
html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden; /* desktop: no scroll */
}

/* Allow scroll on small screens + prevent horizontal scroll */
@media (max-width: 600px) {
  html,
  body {
    overflow-y: hidden;
    overflow-x: hidden !important;
    max-width: 100%;
    height: 100%;         /* forces full viewport height */
  }

  .desktop {
    overflow-x: hidden !important;
  }
}

body {
  color: #111;
  margin: 0;
  background: url("../assets/wallpaper.jpg") center / cover no-repeat fixed;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
  font-size: var(--body-font-size) !important;
  font-family: "Pixelated MS Sans Serif", "Microsoft Sans Serif", Tahoma,
    Verdana, sans-serif !important;
}

/* mobile background-attachment fix */
@media (max-width: 600px) {
  body {
    background-attachment: scroll;
  }
}

/* Force Win98 cursor everywhere, even on clickable things */
* {
  cursor: url("../assets/cursor.cur") 0 0, auto !important;
}

/* ============================================
   GLOBAL FONT OVERRIDES (keep 98.css look but bigger)
   ============================================ */
.window,
.title-bar,
button,
label,
input,
textarea,
select,
option {
  font-size: var(--ui-font-size) !important;
  font-family: "Pixelated MS Sans Serif", "Microsoft Sans Serif", Tahoma,
    Verdana, sans-serif !important;
}

/* Body text inside the popup */
.window-body p {
  font-size: 16px !important;
  line-height: 1.3;
}

/* Desktop container */
.desktop {
  min-height: 100vh;
  position: relative;
  padding-bottom: var(--taskbar-height);
  overflow-x: hidden;
}

/* ============================================
   DESKTOP ICONS
   ============================================ */
.icons {
  position: fixed;
  top: clamp(12px, 2vh, 24px);
  left: clamp(10px, 2vw, 28px);
  display: grid;
  gap: 18px;
  z-index: 1;
}

.icon {
  display: grid;
  justify-items: center;
  text-decoration: none;
  color: #fff;
}

.icon img {
  width: 42px;
  height: 42px;
  image-rendering: auto;
  margin-bottom: 6px;
}

.icon span {
  background: #008080;
  padding: 3px 6px;
  line-height: 1.1;
  font-size: 14px;
}

/* ============================================
   POPUP WINDOW + BASE STATE
   ============================================ */
.win98popup.window {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -45%) scale(1);
  width: min(92vw, 480px);
  z-index: 2;
  display: block;
  opacity: 0; /* JS + animation will bring this to 1 */
}

.window-body {
  padding: 10px 14px;
}

.msg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.msg img {
  image-rendering: auto;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.title-bar-controls button[aria-label="Close"][disabled] {
  opacity: 0.6;
}

/* ============================================
   TASKBAR + START + TASK BUTTON + TRAY
   ============================================ */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--taskbar-height);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  z-index: 3;
  background: var(--surface, #c0c0c0);
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

/* OVERRIDE JUST FOR TASKBAR CONTROLS (bigger text) */
.start-btn,
.task-item {
  font-size: 16px !important;
  font-family: "Pixelated MS Sans Serif", "Microsoft Sans Serif", Tahoma,
    sans-serif !important;
}

/* Start button */
.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  height: calc(var(--taskbar-height) - 4px);
  margin-left: 1px;
  font-size: 20px;
  cursor: pointer;

  background: var(--button-face, #c0c0c0);
  border: none;
  border-radius: 0;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

.start-btn:active {
  box-shadow:
    inset 1px 1px #0a0a0a,
    inset -1px -1px #ffffff,
    inset 2px 2px #808080,
    inset -2px -2px #c0c0c0;
  padding-top: 3px;
  padding-left: 11px;
}

.start-icon {
  height: calc(var(--taskbar-height) - 10px);
  width: auto;
  image-rendering: pixelated;
}

/* Vertical separators */
.task-separator,
.tray-separator {
  width: 4px;
  align-self: stretch;
  margin: 0 4px;
  background: #c0c0c0;
  box-shadow:
    inset -2px 0 #ffffff,
    inset 2px 0 #808080;
}

/* Task area + task button */
.task-area {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  overflow: hidden;
}

.task-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--taskbar-height) - 4px);
  padding: 0 10px;
  min-width: 120px;

  font-size: 11px;
  background: var(--surface, #c0c0c0);
  border: none;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px -2px #808080,
    inset 2px 2px #dfdfdf;
}

/* Slightly larger label text inside the task button */
.task-item span {
  font-size: 14px !important;
}

.task-item.is-active {
  background: #dfdfdf;
  box-shadow:
    inset 1px 1px #0a0a0a,
    inset -1px -1px #ffffff,
    inset 2px 2px #808080,
    inset -2px -2px #dfdfdf;
  padding-top: 1px;
  padding-left: 11px;
}

.task-item:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.task-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

/* Tray on the right */
.tray {
  margin-left: auto;
  margin-right: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  color: #000;
}

.tray img {
  height: var(--tray-icon-h);
  width: var(--tray-icon-h);
  image-rendering: pixelated;
}

.tray-label {
  white-space: nowrap;
  user-select: none;
}

/* ============================================
   MOBILE TWEAKS
   ============================================ */
@media (max-width: 480px) {
  .icons {
    position: fixed;
    top: clamp(20px, 4vh, 32px);
    left: clamp(18px, 4vw, 36px);
    display: grid;
    gap: 10px;
    z-index: 3;
  }

  .icon img {
    width: 36px;
    height: 36px;
  }

  .win98popup.window {
    width: 94vw;
    top: 52%;
    transform: translate(-50%, -52%) scale(1);
  }
}

/* ============================================
   WIN98-STYLE OPEN/CLOSE ANIMATION
   ============================================ */
@keyframes win98-zoom-in {
  0% {
    transform: translate(-50%, -45%) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -45%) scale(1);
    opacity: 1;
  }
}

@keyframes win98-zoom-out {
  0% {
    transform: translate(-50%, -45%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -45%) scale(0.9);
    opacity: 0;
  }
}

/* Applied from JS when opening/closing */
.window-anim-in {
  animation: win98-zoom-in 140ms ease-out forwards;
}

.window-anim-out {
  animation: win98-zoom-out 120ms ease-in forwards;

}