body {
  margin: 0;
  font-family: 'Tahoma', serif;
  background-color: #97ABC4;
  overflow: hidden;
}

.desktop {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}


.desktop-icons {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  height: calc(100% - 50px);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  cursor: pointer;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

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

.icon.draggable {
  position: absolute; /* required for true dragging */
  user-select: none;
}

/* Prevent overflow and center content */
#audio-window {
  max-width: 320px;
  min-width: 280px;
  box-sizing: border-box;
}

#audio-window .window-body {
  padding: 12px;
  box-sizing: border-box;
  text-align: center;
}

#audio-window .controls-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.tree {
  list-style: none;
  padding-left: 10px;
  font-family: 'Tahoma', serif;
}

.tree details summary {
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 4px;
}

.tree ul {
  list-style: none;
  padding-left: 16px;
}

.tree li {
  margin: 2px 0;
}

/* in styles.css, at the bottom */

/* Start button color override */
#start-button.xp.start {
  font: menu !important;
  font-size: 12px !important;
  font-weight: bold !important;
  background-image: none !important;       /* kill the default gradient */
  background-color: #42BB41 !important;  /* your blue */
  box-shadow: none !important;            /* kill all shadows */
  text-shadow: .5px .5px 0 rgba(0,0,0,0.5) !important;
  transform: scaleY(1.1);
  font-style: italic !important
}

#start-button.xp.start i {
  font-style: italic !important;
}

#start-button.xp.start:hover {
  background-image: none !important;       /* ensure no gradient on hover */
  background-color: #1A8E1B !important;    /* darker hover shade */
}

/* Keep taskbar buttons grouped at the left, not at the edge */
#xp-taskbar.title-bar {
  justify-content: flex-start !important;
}

/* enable transitions on all windows */
.window {
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: top left;
}

/* when minimizing: shrink & fade out */
.window.minimizing {
  transform: scale(0.3);
  opacity: 0;
}

/* when restoring: start small/invisible */
.window.restoring {
  transform: scale(0.3);
  opacity: 0;
}

/* final state after restore animation */
.window.restoring.active {
  transform: scale(1);
  opacity: 1;
}

#documents-window {
  width: 300px !important;
}

#notification-toast {
  position: relative;   /* so the text can be absolutely centered */
  background: none !important;
  max-width: 285px !important;    /* set your desired width */
  max-height: 85px !important;   /* set your desired height */
  padding: 0px;
  border: none !important;
  border-radius: 4px;
  box-shadow: none !important;
  z-index: 100000;
  opacity: 1 !important;
  transition: opacity 1s ease !important;
}

#notification-toast img {
  width: 300px !important;
  height: auto !important;
}

#notification-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;         /* or whatever padding you want */
  text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 12px;
  color: black;
  word-wrap: break-word;
}

/* blinking cursor */
.blinking-cursor {
  display: inline-block;
  animation: blink 1s step-start infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ─── Remove XP window frame around the faux terminal ───────────────── */
#terminal-overlay .window {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
  padding: 0 !important;
}

#terminal-overlay .title-bar,
#terminal-overlay .title-bar-controls,
#terminal-overlay .title-bar-text {
  display: none !important;
}

#taskbar-clock {
  /* change color or font-size if needed */
  font: menu !important;
  color: white !important;    /* make text white */
  text-align: center;         /* center the two lines */
  style: bold !important;
  text-shadow: .5px .5px 0 rgba(0,0,0,0.5) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-shadow: .5px .5px 0 rgba(0,0,0,0.5) !important;
}

#mute-button {
  background-image: none !important;  /* prevent xp.css icon styling */
  font-size: 16px;                    /* make the 🔊/🔇 larger */
}

/* ─── Make merch grid cells fixed-height and images contained ───────────────── */
.merch-grid {
  /* keep your existing columns... */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

  /* add a fixed row height */
  grid-auto-rows: 150px;      /* adjust 150px to whatever cell height you want */
  gap: 12px;
}

.merch-item {
  /* full-height flex column so img can fill its space */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}

.merch-item img {
  /* fill the cell width & height, but keep aspect ratio */
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-bottom: 6px;
}