/* =========================================================
   HELLSPLAT // ARCHIVE DISK DEFRAG V21
   Windows 98-style simulated defragmenter.
   Add this file as assets/css/defrag.css or paste at the end of style.css.
========================================================= */

.defrag-module {
  --w98-face: #c0c0c0;
  --w98-dark: #404040;
  --w98-darker: #202020;
  --w98-light: #ffffff;
  --w98-mid: #808080;
  --w98-title: #000080;
  --w98-title-text: #ffffff;
  --w98-font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
}

.defrag-page-header {
  margin-bottom: 16px;
}

.defrag-desktop {
  position: relative;
  min-height: 372px;
  padding: 28px 18px;
  overflow: hidden;
  color: #000;
  border: 2px inset #2d2822;
  background: #008080;
  box-shadow: inset 0 0 46px rgba(0, 0, 0, .28);
}

/* The desktop shortcut exists in the PHP as a hidden easter egg hook, but the
   window opens immediately. Keeping the icon hidden makes the defrag window
   much closer to the real Windows 98 screenshots and avoids titlebar overlap. */
.defrag-shortcut {
  display: none;
}

.win98-window {
  width: min(100%, 640px);
  margin: 0 auto;
  color: #000;
  font-family: var(--w98-font);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
  box-shadow: 1px 1px 0 #000;
}

.win98-titlebar {
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 2px 2px;
  color: var(--w98-title-text);
  font-weight: 700;
  background: var(--w98-title);
}

.win98-title-left {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.win98-title-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, transparent 0 2px, #000080 2px 5px, transparent 5px),
    linear-gradient(#00ffff 0 4px, #0000aa 4px 8px, #ff0000 8px 11px, #ffff00 11px 14px);
  border: 1px solid #fff;
  box-shadow: 1px 1px 0 #000;
}

.win98-window-controls {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.win98-window-controls button,
.win98-button,
.defrag-scrollbar button {
  padding: 0;
  color: #000;
  font-family: var(--w98-font);
  font-size: 11px;
  line-height: 1;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
}

.win98-window-controls button {
  width: 16px;
  height: 14px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}

.win98-button {
  min-width: 96px;
  height: 24px;
  padding: 3px 12px;
  cursor: pointer;
}

.win98-button:active,
.defrag-scrollbar button:active {
  border-top-color: var(--w98-darker);
  border-left-color: var(--w98-darker);
  border-right-color: var(--w98-light);
  border-bottom-color: var(--w98-light);
  padding-top: 4px;
  padding-left: 13px;
}

.win98-window-body {
  padding: 5px;
}

.defrag-grid-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  height: 178px;
  border-top: 2px solid var(--w98-mid);
  border-left: 2px solid var(--w98-mid);
  border-right: 2px solid var(--w98-light);
  border-bottom: 2px solid var(--w98-light);
  background: #fff;
}

.defrag-grid {
  --defrag-cols: 74;
  display: grid;
  grid-template-columns: repeat(var(--defrag-cols), 1fr);
  grid-auto-rows: 7px;
  gap: 1px;
  align-content: start;
  padding: 3px;
  overflow: hidden;
  background: #000;
}

.defrag-cell {
  min-width: 0;
  height: 7px;
  border: 0;
  box-shadow: none;
  filter: none;
  transition: none;
  image-rendering: pixelated;
}

/* Classic Windows defrag colours.
   dark blue = optimized data, red = data currently being written,
   cyan = unoptimized data, white = free space.
   No random glow/pulse. */
.defrag-cell.is-contiguous,
.defrag-cell.is-not-defragged,
.defrag-cell.is-used {
  background: #000080;
}

.defrag-cell.is-in-progress,
.defrag-cell.is-moving {
  background: #ff0000;
}

.defrag-cell.is-fragment,
.defrag-cell.is-defragged,
.defrag-cell.is-optimized {
  background: #00e5e5;
}

.defrag-cell.is-free-space,
.defrag-cell.is-system,
.defrag-cell.is-free {
  background: #ffffff;
}

.defrag-cell.is-pulse {
  filter: none;
}

.defrag-scrollbar {
  display: grid;
  grid-template-rows: 18px 1fr 18px;
  background: var(--w98-face);
  border-left: 1px solid var(--w98-mid);
}

.defrag-scrollbar button {
  width: 18px;
  height: 18px;
  font-size: 9px;
}

.defrag-scroll-track {
  position: relative;
  border-top: 1px solid var(--w98-mid);
  border-left: 1px solid var(--w98-mid);
  background:
    linear-gradient(45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(-45deg, #d8d8d8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d8d8d8 75%),
    linear-gradient(-45deg, transparent 75%, #d8d8d8 75%);
  background-color: #fff;
  background-size: 4px 4px;
  background-position: 0 0, 0 2px, 2px -2px, -2px 0;
}

.defrag-scroll-track span {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 2px;
  height: 18px;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
}

.defrag-details {
  padding: 9px 12px 6px;
}

.defrag-status-line {
  min-height: 14px;
  margin-bottom: 4px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.defrag-bottom-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 214px;
  gap: 8px;
  align-items: start;
}

.defrag-progress-area {
  min-width: 0;
}

.win98-progress {
  width: 100%;
  height: 16px;
  padding: 2px;
  overflow: hidden;
  background: #fff;
  border-top: 2px solid var(--w98-mid);
  border-left: 2px solid var(--w98-mid);
  border-right: 2px solid var(--w98-light);
  border-bottom: 2px solid var(--w98-light);
}

.win98-progress span {
  display: grid;
  grid-template-columns: repeat(var(--progress-block-count, 24), 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  background: transparent;
}

.win98-progress-block {
  display: block;
  min-width: 0;
  height: 100%;
  background: transparent;
}

.win98-progress-block.is-filled {
  background: #000080;
}

.defrag-percent {
  margin-top: 4px;
  color: #000;
}

.defrag-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.defrag-legend {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-around;
  gap: 4px 14px;
  margin-top: 9px;
  padding: 6px;
  color: #000;
  background: #d8d8d8;
  border-top: 2px solid var(--w98-mid);
  border-left: 2px solid var(--w98-mid);
  border-right: 2px solid var(--w98-light);
  border-bottom: 2px solid var(--w98-light);
}

.defrag-legend div {
  white-space: nowrap;
}

.defrag-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid #000;
}

.legend-free-space { background: #ffffff; }
.legend-optimized { background: #000080; }
.legend-writing { background: #ff0000; }
.legend-unoptimized { background: #00e5e5; }

/* Backward-compatible aliases in case an older defrag.php is still cached. */
.legend-system { background: #ffffff; }
.legend-used { background: #000080; }
.legend-moving { background: #ff0000; }
.legend-free { background: #00e5e5; }

.defrag-app.details-hidden .defrag-status-line,
.defrag-app.details-hidden .defrag-progress-area,
.defrag-app.details-hidden .defrag-legend {
  display: none;
}

.defrag-app.details-hidden .defrag-bottom-row {
  grid-template-columns: 1fr;
}

.defrag-module .home-defrag-tile {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .defrag-desktop {
    min-height: 0;
    padding: 10px;
  }

  .win98-window {
    font-size: 10px;
  }

  .defrag-grid-shell {
    height: 142px;
  }

  .defrag-grid {
    --defrag-cols: 44;
    grid-auto-rows: 7px;
  }

  .defrag-cell {
    height: 7px;
  }

  .defrag-bottom-row {
    grid-template-columns: 1fr;
  }

  .defrag-buttons {
    grid-template-columns: 1fr 1fr;
  }

  .win98-button {
    min-width: 0;
    width: 100%;
  }

  .defrag-legend {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V7 // WINDOWS 98 DESKTOP + MANUAL DEFRAG START
   Keep this block after the base defrag styles.
========================================================= */

.defrag-desktop {
  min-height: 432px;
  padding: 0;
  background: #008080;
}

.win98-desktop-stage {
  position: relative;
  min-height: 432px;
  height: 432px;
  overflow: hidden;
  color: #000;
  font-family: var(--w98-font);
  font-size: 11px;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,.08), transparent 140px),
    #008080;
}

.win98-desktop-note {
  position: absolute;
  right: 16px;
  top: 14px;
  color: rgba(255,255,255,.42);
  font-size: 11px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.45);
  pointer-events: none;
}

.defrag-shortcut {
  display: grid;
  position: absolute;
  left: 18px;
  top: 18px;
  width: 82px;
  min-height: 74px;
  place-items: center;
  gap: 5px;
  padding: 5px 3px;
  color: #fff;
  text-align: center;
  font-family: var(--w98-font);
  font-size: 11px;
  line-height: 1.05;
  background: transparent;
  border: 1px dotted transparent;
  border-radius: 0;
  cursor: default;
  appearance: none;
  text-shadow: 1px 1px 0 #000;
}

.defrag-shortcut:hover,
.defrag-shortcut:focus-visible {
  border-color: rgba(255,255,255,.72);
  outline: none;
}

.defrag-shortcut:active span:last-child {
  background: #000080;
}

.defrag-shortcut-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, transparent 0 4px, #000080 4px 11px, transparent 11px),
    linear-gradient(#00ffff 0 8px, #0000aa 8px 17px, #ff0000 17px 24px, #ffff00 24px 32px);
  border: 1px solid #fff;
  box-shadow: 1px 1px 0 #000;
}

.win98-desktop-stage .defrag-app {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 47%;
  width: min(calc(100% - 40px), 640px);
  margin: 0;
  transform: translate(-50%, -50%);
}

.defrag-app.is-hidden,
.win98-task-button[hidden],
.win98-start-menu[hidden],
.defrag-legend[hidden] {
  display: none !important;
}

.win98-titlebar {
  cursor: default;
}

.win98-button:disabled {
  color: #808080;
  cursor: default;
  text-shadow: 1px 1px 0 #fff;
}

.win98-button:disabled:active {
  padding: 3px 12px;
  border-top-color: var(--w98-light);
  border-left-color: var(--w98-light);
  border-right-color: var(--w98-darker);
  border-bottom-color: var(--w98-darker);
}

.win98-start-menu {
  position: absolute;
  left: 2px;
  bottom: 28px;
  z-index: 20;
  width: 270px;
  min-height: 88px;
  display: grid;
  grid-template-columns: 28px 1fr;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
  box-shadow: 1px 1px 0 #000;
}

.win98-start-side {
  display: flex;
  align-items: end;
  justify-content: left;
  padding: 6px 0;
  color: #fff;
  font-weight: 700;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: linear-gradient(#000080, #000);
}

.win98-start-items {
  padding: 4px;
}

.win98-start-items button {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: #000;
  text-align: left;
  font-family: var(--w98-font);
  font-size: 11px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: default;
  appearance: none;
}

.win98-start-items button:hover,
.win98-start-items button:focus-visible {
  color: #fff;
  background: #000080;
  outline: none;
}

.win98-menu-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, transparent 0 2px, #000080 2px 7px, transparent 7px),
    linear-gradient(#00ffff 0 5px, #0000aa 5px 10px, #ff0000 10px 14px, #ffff00 14px 18px);
  border: 1px solid #fff;
  box-shadow: 1px 1px 0 #000;
}

.win98-taskbar {
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  box-shadow: inset 0 1px 0 #dfdfdf;
}

.win98-start-button,
.win98-task-button,
.win98-clock {
  height: 22px;
  color: #000;
  font-family: var(--w98-font);
  font-size: 11px;
  line-height: 1;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
  border-radius: 0;
  appearance: none;
}

.win98-start-button {
  min-width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2px 8px;
  font-weight: 700;
  cursor: default;
}

.win98-start-button span {
  width: 14px;
  height: 14px;
  display: inline-block;
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, #ff0000 0 45%, transparent 45%),
    linear-gradient(180deg, #00a000 0 50%, #0000ff 50% 100%);
  border: 1px solid #222;
}

.win98-start-button:active,
.win98-start-button.is-pressed,
.win98-task-button:active {
  border-top-color: var(--w98-darker);
  border-left-color: var(--w98-darker);
  border-right-color: var(--w98-light);
  border-bottom-color: var(--w98-light);
}

.win98-task-button {
  min-width: 148px;
  padding: 2px 9px;
  text-align: left;
  cursor: default;
}

.win98-task-spacer {
  flex: 1 1 auto;
}

.win98-clock {
  min-width: 72px;
  display: grid;
  place-items: center;
  padding: 2px 7px;
  border-top-color: var(--w98-mid);
  border-left-color: var(--w98-mid);
  border-right-color: var(--w98-light);
  border-bottom-color: var(--w98-light);
}

@media (max-width: 760px) {
  .defrag-desktop,
  .win98-desktop-stage {
    min-height: 430px;
    height: 430px;
  }

  .win98-desktop-stage .defrag-app {
    top: 51%;
    width: calc(100% - 14px);
  }

  .defrag-shortcut {
    left: 10px;
    top: 10px;
  }

  .win98-desktop-note {
    display: none;
  }

  .win98-task-button {
    min-width: 118px;
  }
}


/* =========================================================
   V8 // NESTED START MENU + SHUT DOWN SCREEN
   Keep this block after the V7 desktop styles.
========================================================= */

.win98-start-menu {
  overflow: visible;
  width: 238px;
  min-height: 112px;
}

.win98-start-items,
.win98-submenu {
  color: #000;
}

.win98-start-items button,
.win98-submenu button {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  color: #000;
  text-align: left;
  font-family: var(--w98-font);
  font-size: 11px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: default;
  appearance: none;
}

.win98-start-items button:hover,
.win98-start-items button:focus-visible,
.win98-start-items button.is-open,
.win98-submenu button:hover,
.win98-submenu button:focus-visible,
.win98-submenu button.is-open {
  color: #fff;
  background: #000080;
  outline: none;
}

.win98-menu-arrow {
  margin-left: auto;
  font-size: 10px;
  line-height: 1;
}

.win98-submenu {
  position: absolute;
  z-index: 22;
  width: 174px;
  min-height: 34px;
  padding: 3px;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-light);
  border-left: 2px solid var(--w98-light);
  border-right: 2px solid var(--w98-darker);
  border-bottom: 2px solid var(--w98-darker);
  box-shadow: 1px 1px 0 #000;
}

.win98-programs-menu {
  left: calc(100% - 2px);
  top: 4px;
}

.win98-system-tools-menu {
  left: calc(100% + 170px);
  top: 4px;
  width: 188px;
}

.win98-menu-folder-icon,
.win98-menu-shutdown-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  border: 1px solid #111;
  box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #808080 inset;
}

.win98-menu-folder-icon {
  background:
    linear-gradient(#ffff80 0 6px, transparent 6px),
    linear-gradient(90deg, #d6a300 0 6px, #ffff80 6px 15px, #d6a300 15px),
    linear-gradient(#e9c847, #c49a21);
}

.win98-menu-shutdown-icon {
  background:
    radial-gradient(circle at 50% 45%, #ffff80 0 18%, #ff8000 19% 42%, #8b0000 43% 58%, transparent 59%),
    linear-gradient(#000080, #000040);
}

.win98-submenu[hidden],
.win98-shutdown-screen[hidden] {
  display: none !important;
}

.win98-shutdown-screen {
  position: absolute;
  inset: 0 0 28px 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f8f3c0;
  text-align: center;
  font-family: var(--w98-font);
  background:
    radial-gradient(circle at 50% 36%, rgba(0, 128, 128, .26), transparent 240px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    #000;
}

.win98-shutdown-message {
  display: grid;
  gap: 14px;
  max-width: 620px;
  padding: 24px 30px;
  text-shadow: 1px 1px 0 #000;
}

.win98-shutdown-message strong {
  display: block;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height: 1.1;
  font-weight: 700;
  color: #fff7b2;
}

.win98-shutdown-message span {
  display: block;
  color: #c8c8c8;
  font-size: 12px;
}

.win98-desktop-stage.is-shutdown .defrag-shortcut,
.win98-desktop-stage.is-shutdown .win98-desktop-note,
.win98-desktop-stage.is-shutdown .defrag-app,
.win98-desktop-stage.is-shutdown .win98-start-menu {
  display: none !important;
}

@media (max-width: 760px) {
  .win98-start-menu {
    width: 222px;
  }

  .win98-submenu {
    left: 30px;
    width: 190px;
  }

  .win98-programs-menu {
    top: -42px;
  }

  .win98-system-tools-menu {
    top: -82px;
  }

  .win98-shutdown-screen {
    padding: 14px;
  }

  .win98-shutdown-message {
    padding: 18px 14px;
  }
}


/* =========================================================
   V9 // START ICON + MEMORY SHUTDOWN SCREEN
   Uses assets/media/system/win98-start-icon.png
========================================================= */

.win98-start-logo {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.win98-start-button .win98-start-label {
  width: auto;
  height: auto;
  display: inline;
  background: none;
  border: 0;
  box-shadow: none;
  image-rendering: auto;
}

.win98-shutdown-message {
  justify-items: center;
}

.win98-shutdown-logo {
  width: 74px;
  height: 74px;
  display: block;
  image-rendering: pixelated;
  margin: 0 auto 2px;
}

.win98-shutdown-message strong {
  max-width: 760px;
}

.win98-shutdown-message span {
  letter-spacing: .02em;
}

@media (max-width: 760px) {
  .win98-shutdown-logo {
    width: 56px;
    height: 56px;
  }
}


/* =========================================================
   V10 // SEPARATE START ICON + DEFRAG APP ICON
   Start icon: assets/media/system/win98-start-icon.png
   App icon:   assets/media/system/defrag-icon.png
========================================================= */

.win98-title-icon,
.defrag-shortcut-icon,
.win98-menu-icon,
.win98-task-icon {
  display: block;
  image-rendering: pixelated;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.win98-title-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.defrag-shortcut-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 2px;
}

.win98-menu-icon,
.win98-menu-app-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.win98-task-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.win98-task-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.win98-start-logo {
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 auto;
  image-rendering: pixelated;
  object-fit: contain;
}

.win98-shutdown-logo {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

@media (max-width: 760px) {
  .defrag-shortcut-icon {
    width: 32px;
    height: 32px;
  }

  .win98-shutdown-logo {
    width: 60px;
    height: 60px;
  }
}


/* =========================================================
   V11 // ORIGINAL PROGRAMS + SHUT DOWN ICONS
   Start icon:    assets/media/system/win98-start-icon.png
   Programs icon: assets/media/system/programs-icon.png
   Shutdown icon: assets/media/system/shutdown-icon.png
   App icon:      assets/media/system/defrag-icon.png
========================================================= */

.win98-start-menu {
  min-height: 166px;
}

.win98-start-items {
  min-height: 166px;
  display: flex;
  flex-direction: column;
}

.win98-start-items .win98-menu-item {
  flex: 0 0 auto;
}

.win98-start-menu-spacer {
  flex: 1 1 auto;
  min-height: 28px;
}

.win98-start-menu-separator {
  flex: 0 0 auto;
  height: 2px;
  margin: 3px 2px 4px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
}

.win98-menu-item span:not(.win98-menu-arrow) {
  min-width: 0;
}

.win98-menu-programs-icon,
.win98-menu-shutdown-img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.win98-menu-shutdown-img {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.win98-shutdown-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}

@media (max-width: 760px) {
  .win98-start-menu,
  .win98-start-items {
    min-height: 156px;
  }

  .win98-start-menu-spacer {
    min-height: 18px;
  }

  .win98-shutdown-logo {
    width: 42px;
    height: 42px;
  }
}


/* =========================================================
   V14 // CRT POWER-ON REVEAL AFTER TERMINAL PRINT
   Keep at the very end of defrag.css.
========================================================= */

.defrag-desktop.crt-powerboot {
  position: relative;
  overflow: hidden;
  background: #000;
}

.crt-powerboot-content {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: scale(.992);
  filter: brightness(.55) contrast(1.18) saturate(.9);
}

.crt-powerboot.is-on .crt-powerboot-content {
  animation: hellsplatCrtReveal 560ms cubic-bezier(.18, .78, .21, 1) 420ms forwards;
}

.crt-powerboot:not(.is-ready) .crt-powerboot-content {
  pointer-events: none;
}

.crt-powerboot-flash,
.crt-powerboot-line {
  position: absolute;
  pointer-events: none;
  z-index: 60;
}

.crt-powerboot-flash {
  inset: 0;
  background: #000;
  opacity: 1;
}

.crt-powerboot-line {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%) scaleX(.018) scaleY(1);
  opacity: 0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(137,255,215,.78) 22%,
      rgba(255,255,255,.96) 50%,
      rgba(137,255,215,.78) 78%,
      rgba(0,0,0,0) 100%);
  box-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 18px rgba(120,255,210,.62),
    0 0 32px rgba(0,255,190,.28);
}

.crt-powerboot.is-booting .crt-powerboot-flash {
  animation: hellsplatCrtBootFlash 1180ms ease-out forwards;
}

.crt-powerboot.is-booting .crt-powerboot-line {
  animation: hellsplatCrtBootLine 860ms cubic-bezier(.12, .78, .16, 1) forwards;
}

.crt-powerboot.is-ready .crt-powerboot-flash,
.crt-powerboot.is-ready .crt-powerboot-line {
  display: none;
}

@keyframes hellsplatCrtBootFlash {
  0%, 16% {
    opacity: 1;
    background: #000;
  }
  24% {
    opacity: .96;
    background: #eafff2;
  }
  33% {
    opacity: .42;
    background: #90ffd1;
  }
  52% {
    opacity: .2;
    background: #00150f;
  }
  72% {
    opacity: .11;
    background: #000;
  }
  100% {
    opacity: 0;
    background: #000;
  }
}

@keyframes hellsplatCrtBootLine {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(.018) scaleY(1);
  }
  12% {
    opacity: 1;
    transform: translateY(-50%) scaleX(.16) scaleY(1);
  }
  30% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1) scaleY(1);
  }
  58% {
    opacity: .95;
    transform: translateY(-50%) scaleX(1) scaleY(22);
  }
  82% {
    opacity: .34;
    transform: translateY(-50%) scaleX(1) scaleY(180);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scaleX(1) scaleY(240);
  }
}

@keyframes hellsplatCrtReveal {
  0% {
    opacity: 0;
    transform: scale(1.018);
    filter: brightness(2.45) contrast(1.55) saturate(1.25) blur(1.2px);
  }
  24% {
    opacity: 1;
    transform: scale(1.006);
    filter: brightness(1.7) contrast(1.36) saturate(1.18) blur(.45px);
  }
  52% {
    opacity: 1;
    transform: scale(.998);
    filter: brightness(.92) contrast(1.24) saturate(1.04) blur(.15px);
  }
  72% {
    opacity: 1;
    transform: scale(1.002);
    filter: brightness(1.18) contrast(1.18) saturate(1.05) blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) contrast(1) saturate(1) blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-powerboot-content {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .crt-powerboot-flash,
  .crt-powerboot-line {
    display: none !important;
  }
}


/* V13: while the normal Hellsplat page intro is being printed,
   the fake Windows desktop is fully hidden. The CRT effect starts
   only after #print-surface receives .is-ready. */
/* V14: reserve the full fake-monitor space while the normal Hellsplat
   intro is printing. The Windows desktop itself is injected from a <template>
   only when the CRT power-on starts, so the global print animation has
   nothing to draw here except a black, correctly-sized screen. */
.defrag-desktop.crt-powerboot.is-waiting-for-terminal {
  min-height: 432px !important;
  height: 432px !important;
  max-height: none !important;
  padding: 0 !important;
  border-width: 2px !important;
  opacity: 1 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.defrag-desktop.crt-powerboot.is-waiting-for-terminal .crt-powerboot-flash {
  display: block;
  opacity: 1;
  background: #000;
}

.defrag-desktop.crt-powerboot.is-waiting-for-terminal .crt-powerboot-line {
  opacity: 0;
}

.defrag-desktop.crt-powerboot.is-booting,
.defrag-desktop.crt-powerboot.is-ready {
  min-height: 432px !important;
  height: 432px !important;
  max-height: none !important;
  opacity: 1 !important;
}

@media (max-width: 760px) {
  .defrag-desktop.crt-powerboot.is-waiting-for-terminal,
  .defrag-desktop.crt-powerboot.is-booting,
  .defrag-desktop.crt-powerboot.is-ready {
    min-height: 430px !important;
    height: 430px !important;
  }
}


/* =========================================================
   V15 // ONE-SHOT CRT + PRINT ENDS BEFORE FAKE PC
   Keep at the very end of defrag.css.
========================================================= */

/* The terminal-style page reveal should only print the intro rows:
   command, file id, title and the signature line. The fake Windows PC
   sits below as a reserved monitor area and powers on by itself after
   the normal print finishes. */
.defrag-module [data-crt-powerboot] [data-print-row] {
  visibility: visible;
}

/* Reserve the exact fake-monitor height without revealing any desktop
   content while the normal Hellsplat printer is still running. */
.defrag-desktop.crt-powerboot.is-waiting-for-terminal {
  visibility: hidden !important;
  min-height: 432px !important;
  height: 432px !important;
  max-height: none !important;
  padding: 0 !important;
  border-width: 2px !important;
  overflow: hidden !important;
}

.defrag-desktop.crt-powerboot.is-booting,
.defrag-desktop.crt-powerboot.is-ready {
  visibility: visible !important;
  min-height: 432px !important;
  height: 432px !important;
  max-height: none !important;
}

/* Make sure only the CRT reveal is visible after the intro; no extra
   line/flash animation should be replayed by a late fallback. */
.defrag-desktop.crt-powerboot.is-ready .crt-powerboot-flash,
.defrag-desktop.crt-powerboot.is-ready .crt-powerboot-line {
  display: none !important;
  animation: none !important;
}

@media (max-width: 760px) {
  .defrag-desktop.crt-powerboot.is-waiting-for-terminal,
  .defrag-desktop.crt-powerboot.is-booting,
  .defrag-desktop.crt-powerboot.is-ready {
    min-height: 430px !important;
    height: 430px !important;
  }
}


/* =========================================================
   V19 // FINAL WIN98 DEFRAG POLISH
   Legend dialog, random disk map, unmovable clusters,
   narrow blocky progress bar.
========================================================= */

.defrag-cell.is-unmovable {
  background:
    linear-gradient(135deg,
      transparent 0 42%,
      #8a0000 42% 58%,
      transparent 58% 100%),
    #ffffff !important;
}

.defrag-cell.is-unmovable::after {
  display: none;
}

.defrag-legend-window,
.defrag-legend-window.win98-window {
  position: absolute;
  z-index: 30;
  top: 24px;
  right: 28px;
  width: 270px;
  margin: 0;
  font-family: var(--w98-font);
  font-size: 11px;
  line-height: 1.25;
}

.defrag-legend-window.is-hidden,
.defrag-legend-window[hidden] {
  display: none !important;
}

.defrag-legend-window .win98-titlebar {
  height: 18px;
}

.defrag-legend-window .win98-window-controls button {
  min-width: 16px;
  width: 16px;
  height: 14px;
  line-height: 10px;
  padding: 0;
}

.defrag-legend-body {
  padding: 9px 13px 10px;
  color: #000;
  background: var(--w98-face);
}

.defrag-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 17px;
  white-space: nowrap;
}

.defrag-legend-row i {
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid #000;
  box-sizing: border-box;
}

.defrag-legend-row .legend-optimized,
.legend-optimized {
  background: #000080;
}

.defrag-legend-row .legend-unoptimized,
.legend-unoptimized {
  background: #00e5e5;
}

.defrag-legend-row .legend-free-space,
.legend-free-space {
  background: #ffffff;
}

.defrag-legend-row .legend-writing,
.legend-writing {
  background: #ff0000;
}

.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  background:
    linear-gradient(135deg,
      transparent 0 39%,
      #8a0000 39% 61%,
      transparent 61% 100%),
    #ffffff;
}

.defrag-legend-note {
  margin: 10px 0 9px;
}

.defrag-legend-close-button {
  display: block;
  width: 92px;
  margin: 0 auto;
}

/* V18/V19 progress correction: the bar contains generated blocks,
   but only .is-filled blocks should be visible. */
.win98-progress {
  width: 100% !important;
  height: 17px !important;
  min-height: 17px !important;
  padding: 2px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-top: 2px solid var(--w98-mid) !important;
  border-left: 2px solid var(--w98-mid) !important;
  border-right: 2px solid var(--w98-light) !important;
  border-bottom: 2px solid var(--w98-light) !important;
  box-sizing: border-box !important;
}

.win98-progress [data-defrag-progress-bar] {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.win98-progress [data-defrag-progress-bar] > .win98-progress-block {
  display: block !important;
  flex: 0 0 6px !important;
  width: 6px !important;
  max-width: 6px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  visibility: hidden !important;
  image-rendering: pixelated;
}

.win98-progress [data-defrag-progress-bar] > .win98-progress-block.is-filled {
  background: #17008a !important;
  visibility: visible !important;
}

.win98-progress [data-defrag-progress-bar]::before,
.win98-progress [data-defrag-progress-bar]::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 760px) {
  .defrag-legend-window,
  .defrag-legend-window.win98-window {
    top: 20px;
    right: 20px;
    width: min(270px, calc(100% - 40px));
  }
}

/* =========================================================
   V20 // FINAL MAP LOGIC + WIN98 UNMOVABLE CLUSTER MARK
   Data that will not be moved = white cluster with small red
   square in the top-right corner. No diagonal bad-area mark.
========================================================= */

.defrag-cell.is-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.defrag-cell.is-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 2px !important;
  height: 2px !important;
  background: #cc0000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.defrag-legend-row .legend-unmovable::after,
.legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 3px !important;
  height: 3px !important;
  background: #cc0000 !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* =========================================================
   V21 // ORIGINAL-STYLE UNMOVABLE MARK + DENSER DISK MAP
   Data that will not be moved = white cluster with a red
   top-right quarter mark. This deliberately is NOT diagonal,
   because diagonal marks read as bad/damaged disk areas.
========================================================= */

.defrag-grid .defrag-cell.is-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.defrag-grid .defrag-cell.is-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 3px !important;
  height: 3px !important;
  background: #b00000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.defrag-legend-row .legend-unmovable::after,
.legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 4px !important;
  height: 4px !important;
  background: #b00000 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   V23 // WHITE GRID ONLY ROLLBACK
   Keep V21 map logic, cluster size and proportions. Only the
   disk-map grid/gap colour changes from black to white, closer
   to the original Win98 defrag view.
========================================================= */

.defrag-grid {
  background: #ffffff !important;
}


/* =========================================================
   V24 // ORIGINAL-STYLE WHITE GRID + BLACK CLUSTER OUTLINES
   The disk map keeps the V21/V23 proportions and generator.
   Only the cluster rendering is adjusted: white grid/gaps,
   black cluster borders, and a Win98-style unmovable marker.
========================================================= */

.defrag-grid {
  background: #ffffff !important;
  gap: 1px !important;
}

.defrag-grid .defrag-cell {
  box-sizing: border-box !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-clip: padding-box !important;
}

.defrag-grid .defrag-cell.is-free,
.defrag-grid .defrag-cell.is-free-space,
.defrag-grid .defrag-cell.is-system {
  background: #ffffff !important;
}

.defrag-grid .defrag-cell.is-fragment,
.defrag-grid .defrag-cell.is-defragged,
.defrag-grid .defrag-cell.is-optimized {
  background: #00e5e5 !important;
}

.defrag-grid .defrag-cell.is-contiguous,
.defrag-grid .defrag-cell.is-not-defragged,
.defrag-grid .defrag-cell.is-used {
  background: #000080 !important;
}

.defrag-grid .defrag-cell.is-in-progress,
.defrag-grid .defrag-cell.is-moving {
  background: #ff0000 !important;
}

/* Data that will not be moved: white cluster with a red top-right
   block. The cell's own black border forms the top/right outline;
   the small shadow below/left gives the red mark the Win98 boxed feel. */
.defrag-grid .defrag-cell.is-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
}

.defrag-grid .defrag-cell.is-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 3px !important;
  height: 3px !important;
  box-sizing: border-box !important;
  background: #c00000 !important;
  border: 0 !important;
  box-shadow: -1px 0 0 #000000, 0 1px 0 #000000 !important;
}

/* Legend icon mirrors the map marker, just slightly larger so it
   remains readable inside the popup. */
.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  box-sizing: border-box !important;
}

.defrag-legend-row .legend-unmovable::after,
.legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  width: 4px !important;
  height: 4px !important;
  box-sizing: border-box !important;
  background: #c00000 !important;
  border: 0 !important;
  box-shadow: -1px 0 0 #000000, 0 1px 0 #000000 !important;
}


/* =========================================================
   V26 // FIXED WIN98 CLUSTER GEOMETRY
   Reverts the V25 density change. Uses a fixed-size disk map so
   every cluster is exactly the same size, with white horizontal
   and vertical gaps, black outlines, and a top-right unmovable mark.
========================================================= */

.defrag-grid {
  --defrag-cols: 74 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--defrag-cols), 7px) !important;
  grid-auto-rows: 9px !important;
  column-gap: 1px !important;
  row-gap: 1px !important;
  justify-content: start !important;
  align-content: start !important;
  padding: 3px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.defrag-grid .defrag-cell {
  position: relative !important;
  box-sizing: border-box !important;
  width: 7px !important;
  height: 9px !important;
  min-width: 7px !important;
  min-height: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #000000 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
}

.defrag-grid .defrag-cell.is-free,
.defrag-grid .defrag-cell.is-free-space,
.defrag-grid .defrag-cell.is-system {
  background: #ffffff !important;
}

.defrag-grid .defrag-cell.is-fragment,
.defrag-grid .defrag-cell.is-defragged,
.defrag-grid .defrag-cell.is-optimized {
  background: #00e5e5 !important;
}

.defrag-grid .defrag-cell.is-contiguous,
.defrag-grid .defrag-cell.is-not-defragged,
.defrag-grid .defrag-cell.is-used {
  background: #000080 !important;
}

.defrag-grid .defrag-cell.is-in-progress,
.defrag-grid .defrag-cell.is-moving {
  background: #ff0000 !important;
}

.defrag-grid .defrag-cell.is-unmovable {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
}

.defrag-grid .defrag-cell.is-unmovable::before {
  display: none !important;
  content: none !important;
}

.defrag-grid .defrag-cell.is-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 4px !important;
  height: 4px !important;
  box-sizing: border-box !important;
  background: #c00000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  position: relative !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
}

.defrag-legend-row .legend-unmovable::before,
.legend-unmovable::before {
  display: none !important;
  content: none !important;
}

.defrag-legend-row .legend-unmovable::after,
.legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 5px !important;
  height: 5px !important;
  box-sizing: border-box !important;
  background: #c00000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .defrag-grid {
    --defrag-cols: 44 !important;
    grid-template-columns: repeat(var(--defrag-cols), 7px) !important;
    grid-auto-rows: 9px !important;
    column-gap: 1px !important;
    row-gap: 1px !important;
  }

  .defrag-grid .defrag-cell {
    width: 7px !important;
    height: 9px !important;
    min-width: 7px !important;
    min-height: 9px !important;
  }
}
/* Free space na mapie */
.defrag-cell.is-free {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Free space w legendzie */
.legend-free {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
}
/* =========================================================
   V26.1 // FINAL FREE SPACE + UNMOVABLE MARK TWEAK
   Free clusters blend into white grid.
   Unmovable marker is smaller and locked to top-right corner.
========================================================= */

/* Free space: white fill + white border, so it disappears into the white grid */
.defrag-module .defrag-grid .defrag-cell.is-free,
.defrag-module .defrag-grid .defrag-cell.is-free-space,
.defrag-module .defrag-grid .defrag-cell.is-system {
  background: #ffffff !important;

  border-top-color: #ffffff !important;
  border-right-color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  border-left-color: #ffffff !important;

  box-shadow: none !important;
  outline: 0 !important;
}

/* Legend free-space icon */
.defrag-module .legend-free,
.defrag-module .legend-free-space {
  background: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* Unmovable cluster: keep white cluster with black border */
.defrag-module .defrag-grid .defrag-cell.is-unmovable {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  overflow: hidden !important;
}

/* Smaller red mark + black left/bottom edge, pinned to top-right */
.defrag-module .defrag-grid .defrag-cell.is-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  width: 3px !important;
  height: 3px !important;

  box-sizing: border-box !important;
  background: #c00000 !important;

  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Legend unmovable icon: same idea, just one pixel larger for readability */
.defrag-module .defrag-legend-row .legend-unmovable,
.defrag-module .legend-unmovable {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  overflow: hidden !important;
}

.defrag-module .defrag-legend-row .legend-unmovable::after,
.defrag-module .legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  width: 4px !important;
  height: 4px !important;

  box-sizing: border-box !important;
  background: #c00000 !important;

  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* =========================================================
   V26.2 // CLASSIC SHUTDOWN SCREEN
   Black screen, amber system text, no icon, no taskbar.
========================================================= */

.win98-desktop-stage.is-shutdown {
  background: #000000 !important;
}

/* Hide fake desktop elements during shutdown */
.win98-desktop-stage.is-shutdown .win98-taskbar,
.win98-desktop-stage.is-shutdown .win98-desktop-taskbar,
.win98-desktop-stage.is-shutdown .win98-start-menu,
.win98-desktop-stage.is-shutdown .win98-start-button,
.win98-desktop-stage.is-shutdown .win98-desktop-icons,
.win98-desktop-stage.is-shutdown .win98-desktop-icon,
.win98-desktop-stage.is-shutdown .win98-window,
.win98-desktop-stage.is-shutdown .defrag-window {
  display: none !important;
}

/* Shutdown screen takes the whole fake monitor */
.win98-desktop-stage.is-shutdown .win98-shutdown-screen {
  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  background: #000000 !important;
  color: #ff8a2a !important;
  text-align: center !important;

  z-index: 9999 !important;
}

/* Inner message block */
.win98-desktop-stage.is-shutdown .win98-shutdown-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hide old icon completely */
.win98-desktop-stage.is-shutdown .win98-shutdown-logo {
  display: none !important;
}

/* Main shutdown text */
.win98-desktop-stage.is-shutdown .win98-shutdown-message strong {
  display: block !important;

  margin: 0 !important;

  font-family: "VT323 Local", "VT323", "Courier New", monospace !important;
  font-size: 34px !important;
  line-height: 0.95 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;

  color: #ff8a2a !important;
  text-shadow: none !important;
}

/* Press any key */
.win98-desktop-stage.is-shutdown .win98-shutdown-message span {
  display: block !important;

  margin-top: 24px !important;

  font-family: "MS Sans Serif", Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;

  color: #cfcfcf !important;
}
/* =========================================================
   FINAL // OPTIMIZED CLUSTERS CLEANUP + LEGEND PROPORTIONS
   Keep map readable. Make legend swatches vertical rectangles.
========================================================= */

/* Optimized / defragmented clusters on the map */
.win98-desktop-stage .defrag-grid .defrag-cell.is-contiguous,
.win98-desktop-stage .defrag-grid .defrag-cell.is-optimized,
.win98-desktop-stage .defrag-grid .defrag-cell.is-defragged {
  background: #000080 !important;
  background-image: none !important;
  border-color: #000000 !important;
}

/* Free space should blend with the white grid */
.win98-desktop-stage .defrag-grid .defrag-cell.is-free,
.win98-desktop-stage .defrag-grid .defrag-cell.is-free-space {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #ffffff !important;
}

/* Unoptimized stays as clean cyan */
.win98-desktop-stage .defrag-grid .defrag-cell.is-unoptimized {
  background: #00ffff !important;
  background-image: none !important;
  border-color: #000000 !important;
}

/* Writing stays red */
.win98-desktop-stage .defrag-grid .defrag-cell.is-writing {
  background: #cc0000 !important;
  background-image: none !important;
  border-color: #000000 !important;
}

/* Legend swatches: make them vertical rectangles, not squares */
.defrag-legend-row > span:first-child,
.defrag-legend-row .legend-box,
.defrag-legend-row .legend-swatch,
.legend-free,
.legend-optimized,
.legend-unoptimized,
.legend-writing,
.legend-unmovable {
  display: inline-block !important;
  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;
  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;

  margin-right: 7px !important;
  vertical-align: -1px !important;

  box-sizing: border-box !important;
}

/* Legend colors */
.legend-optimized {
  background: #000080 !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
}

.legend-unoptimized {
  background: #00ffff !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
}

.legend-writing {
  background: #cc0000 !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
}

.legend-free {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
}

/* Legend unmovable: white rectangle with red top-right mark */
.legend-unmovable {
  position: relative !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #000000 !important;
  overflow: hidden !important;
}

.legend-unmovable::after {
  content: "" !important;
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  width: 3px !important;
  height: 3px !important;

  background: #cc0000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;

  box-sizing: border-box !important;
}
/* =========================================================
   FINAL // LEGEND SWATCH PROPORTIONS FIX
   Make all legend boxes vertical rectangles, including Free space.
========================================================= */

.defrag-legend-row i,
.defrag-legend-row .legend-optimized,
.defrag-legend-row .legend-unoptimized,
.defrag-legend-row .legend-free-space,
.defrag-legend-row .legend-unmovable,
.defrag-legend-row .legend-writing {
  display: inline-block !important;

  width: 7px !important;
  min-width: 7px !important;
  max-width: 7px !important;

  height: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;

  flex: 0 0 7px !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Free space specifically */
.defrag-legend-row .legend-free-space,
.legend-free-space {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
}

/* Keep unmovable marker pinned correctly after resizing */
.defrag-legend-row .legend-unmovable,
.legend-unmovable {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #000000 !important;
}

.defrag-legend-row .legend-unmovable::after,
.legend-unmovable::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;

  width: 3px !important;
  height: 3px !important;

  background: #c00000 !important;
  border-left: 1px solid #000000 !important;
  border-bottom: 1px solid #000000 !important;
  border-top: 0 !important;
  border-right: 0 !important;

  box-sizing: border-box !important;
}
/* =========================================================
   WIN98 START MENU // PLACEHOLDER ITEMS
========================================================= */

.win98-start-menu-items {
  display: flex;
  flex-direction: column;
  padding: 2px;
}

.win98-start-item {
  position: relative;

  display: grid;
  grid-template-columns: 22px 1fr 14px;
  align-items: center;
  gap: 4px;

  width: 100%;
  min-width: 170px;
  height: 26px;

  padding: 2px 5px 2px 3px;

  border: 0;
  background: transparent;
  color: #000;

  font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 11px;
  line-height: 1;

  text-align: left;
  cursor: default;
}

.win98-start-item:not(.is-placeholder):hover,
.win98-start-item.has-submenu:hover {
  background: #000080;
  color: #fff;
}

.win98-start-item.is-placeholder {
  color: #000;
}

.win98-start-item.is-placeholder:hover {
  background: #000080;
  color: #fff;
}

.win98-start-arrow {
  justify-self: end;
  font-size: 10px;
  line-height: 1;
}

.win98-start-separator {
  height: 1px;
  margin: 4px 3px;
  background: #808080;
  border-bottom: 1px solid #fff;
}

/* Tiny fake Win98-ish icons, drawn in CSS so no files needed */
.win98-start-icon {
  position: relative;
  display: inline-block;

  width: 16px;
  height: 16px;

  image-rendering: pixelated;
  box-sizing: border-box;
}

/* Programs: tiny folder/window */
.win98-icon-programs {
  background: #f3e45f;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #9b8f24;
}

.win98-icon-programs::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -3px;
  width: 8px;
  height: 4px;
  background: #f3e45f;
  border: 1px solid #000;
  border-bottom: 0;
}

/* Favorites: yellow star-ish tile */
.win98-icon-favorites {
  background: #fff;
  border: 1px solid #000;
}

.win98-icon-favorites::before {
  content: "★";
  position: absolute;
  left: 1px;
  top: -1px;
  color: #ffdf00;
  font-size: 14px;
  line-height: 16px;
}

/* Documents: paper stack */
.win98-icon-documents {
  background: #fff;
  border: 1px solid #000;
  box-shadow:
    2px 2px 0 #f1d85b,
    3px 3px 0 #000;
}

.win98-icon-documents::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 1px;
  background: #808080;
  box-shadow: 0 3px 0 #808080, 0 6px 0 #808080;
}

/* Settings: simple gear-ish square */
.win98-icon-settings {
  background: #d6d6d6;
  border: 1px solid #000;
}

.win98-icon-settings::before {
  content: "⚙";
  position: absolute;
  left: 0;
  top: -1px;
  color: #000080;
  font-size: 13px;
  line-height: 16px;
}

/* Find: magnifier */
.win98-icon-find {
  border-radius: 50%;
  border: 2px solid #4ab7d8;
  background: #dff8ff;
}

.win98-icon-find::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 7px;
  height: 2px;
  background: #000;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* Help: question mark */
.win98-icon-help {
  background: #d000a8;
  border: 1px solid #000;
  transform: rotate(-12deg);
}

.win98-icon-help::before {
  content: "?";
  position: absolute;
  left: 4px;
  top: 0;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  line-height: 15px;
}

/* Run: small command window */
.win98-icon-run {
  background: #fff;
  border: 1px solid #000;
}

.win98-icon-run::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 10px;
  height: 2px;
  background: #000080;
  box-shadow: 0 4px 0 #008000, 0 8px 0 #c00000;
}

/* Log off: tiny key */
.win98-icon-logoff {
  background: transparent;
}

.win98-icon-logoff::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 7px;
  height: 7px;
  border: 2px solid #e1d447;
  border-radius: 50%;
}

.win98-icon-logoff::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 7px;
  height: 2px;
  background: #000;
  box-shadow: 4px 2px 0 #000;
}

/* Shut down: small computer box */
.win98-icon-shutdown {
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080;
}

.win98-icon-shutdown::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 6px;
  background: #000080;
  border: 1px solid #000;
}

.win98-icon-shutdown::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 1px;
  width: 6px;
  height: 2px;
  background: #808080;
}
/* =========================================================
   WIN98 START MENU // SIDE BRAND
========================================================= */

.win98-start-side {
  position: relative;
  width: 28px;
  min-width: 28px;

  background: #000080;
  overflow: hidden;
}

.win98-start-side-text {
  position: absolute;
  left: 4px;
  bottom: 7px;

  display: flex;
  align-items: baseline;
  gap: 1px;

  transform: rotate(-90deg);
  transform-origin: left bottom;

  white-space: nowrap;

  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  color: #ffffff;

  text-shadow: 1px 1px 0 #000000;
}

.win98-start-side-word {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.06em;
}

.win98-start-side-year {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.08em;
}
/* =========================================================
   WIN98 START MENU // SIDE BRAND FIX
========================================================= */

.win98-start-side {
  position: relative !important;

  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;

  align-self: stretch !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #000080 !important;
  overflow: hidden !important;

  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;

  font-size: initial !important;
  line-height: normal !important;
}

.win98-start-side-text {
  position: absolute !important;

  /*
     Important:
     after rotate(-90deg), text height extends to the LEFT,
     so the origin must sit near the right edge of the blue strip.
  */
  left: 20px !important;
  bottom: 6px !important;

  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;

  transform: rotate(-90deg) !important;
  transform-origin: left bottom !important;

  white-space: nowrap !important;

  font-family: Arial, Helvetica, sans-serif !important;
  line-height: 1 !important;
  color: #fff !important;

  text-shadow: 1px 1px 0 #000 !important;
}

.win98-start-side-word {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
}

.win98-start-side-year {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.08em !important;
}