/* SYSTEM inherits the desktop's existing icon dimensions and label typography. */
.interface-desktop [data-folder='SYSTEM'] {
  left: 72%;
  top: min(84%, calc(100dvh - 168px));
}
.system-icon-selected { display: none; }
.system-desktop-icon button:hover .system-icon-normal,
.system-desktop-icon button:focus .system-icon-normal { display: none; }
.system-desktop-icon button:hover .system-icon-selected,
.system-desktop-icon button:focus .system-icon-selected { display: block; }
@media (min-width: 1280px) and (max-height: 800px) {
  .interface-desktop [data-folder='SYSTEM'] { left: calc(72% - 128px); }
}
@media (min-width: 992px) and (max-width: 1279px) and (max-height: 800px) {
  .interface-desktop [data-folder='SYSTEM'] { left: calc(72% - 128px); top: 19%; }
}
@media (max-width: 991px) {
  .interface-desktop [data-folder='SYSTEM'] { left: 10%; top: min(83%, calc(100dvh - 160px)); }
}
@media (max-width: 991px) and (max-height: 780px) {
  .interface-desktop [data-folder='SYSTEM'] { left: 35%; }
  /* Keep the original buttons' entire tap areas free on very narrow screens. */
  .system-desktop-icon, .system-desktop-icon button { pointer-events: none; }
  .system-desktop-icon button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80px, calc(50vw - 112px));
    height: 72px;
    pointer-events: auto;
  }
  .system-desktop-icon button > p { pointer-events: auto; }
}